.Area02_bg .Area_bgtop {top:-4.5%;}
.Area06_bg .Area_bgtop {top:-5%; height: 140vw}


@media screen and (min-width: 768px) {
  .Area02 .PD_layout ul li .PD_img{margin-top: 0%;padding: 2% 8%;}
  .Area02 .PD_layout ul li .PD_into{margin: 40px 0 0;}
  .Area02 .PD_layout ul li .PD_into .PD_logo{margin: 0;padding: 0;height: 90px;}
  .Area02 .PD_layout ul li .PD_into .PD_logo img{width: 50%;height: auto;box-shadow: 0 .1em .5em 0 rgb(0 0 0 / 0%);border-radius: 18px;padding: 0 1em;}
  .Area02 .PD_layout[data-pd-h3="5"] .PD h3 {margin-bottom: 0em;line-height: 1em;font-size: 2em;}
  .Area02 .PD_layout[data-pd-h3="5"] .PD h3 span { display: inline-block; padding: 0 .5em; max-width: 85%; border-radius: 4px; color: #ffffff;background-color:rgb(255 255 255 / 0%);}
  .Area02 .PD_layout[data-pd-h4="1"] .PD h4 {color: #ffffff;margin-bottom: 0em;line-height: 2em;font-size: 2em;}
  .Area02 .PD_layout ul li .PD p {background: -webkit-linear-gradient(90deg, #ffe485 0%, #ffe485 90%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;top: 15px;height: 3em;}
  .Area02 .PD_layout-CSSBG_01 .PD p .Price{font-size: 48px;}

}

  

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

  .Area02 .PD_layout ul li .PD_img{margin-top: -10%;padding: 10%;}
  .Area02 .PD_layout ul li .PD_into{margin: 15% 0 0;}
  .Area02 .PD_layout ul li .PD_into .PD_logo{margin: 0;padding: 0;height: 9vw;}
  .Area02 .PD_layout ul li .PD_into .PD_logo img{width: 50%;height: auto;box-shadow: 0 .1em .5em 0 rgb(0 0 0 / 0%);border-radius: 18px;padding: 0 0.2em;}
  .Area02 .PD_layout[data-pd-h3="5"] .PD h3 {margin-bottom: 0em;line-height: 1em;}
  .Area02 .PD_layout[data-pd-h3="5"] .PD h3 span { display: inline-block; padding: 0 .5em; max-width: 85%; border-radius: 4px; color: #ffffff;background-color:rgb(255 255 255 / 0%);}
  .Area02 .PD_layout[data-pd-h4="1"] .PD h4 { color: #ffffff;margin-bottom: 0em;line-height: 1.5em;}
  .Area02 .PD_layout ul li .PD p {background: -webkit-linear-gradient(90deg, #ffe485 0%, #ffe485 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
  
}



/*黏人精*/
.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: 300; left: 50%; right: auto; bottom: 50px; 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;}
}

/*提醒微調*/
@media screen and (max-width:767px){.btn_remind {top: 120vw;}}





.lightSweep { position: absolute; top: 8%; left: 0; bottom: 0; right: 0; background: none 0% 0% / auto repeat scroll padding-box border-box  rgba(0, 0, 0, 0); overflow: hidden; z-index:1; pointer-events: none;
	-webkit-filter: brightness(1.5);
	-webkit-mask-size: 300% 200%;
	-webkit-mask-image: -webkit-linear-gradient(  -45deg, 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(-45deg,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(  -45deg, 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(-45deg,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 1.5s ease-out infinite;
  }
  
  @keyframes move {
	from {
	  -webkit-mask-position: 150% 0px;
	  -moz-mask-position: 150% 0px;
	  -o-mask-position: 150% 0px;
	  mask-position: 150% 0px;
	}
	to {
	  -webkit-mask-position: 0% 0px;
	  -moz-mask-position: 0% 0px;
	  -o-mask-position: 0% 0px;
	  mask-position: 0% 0px;
	}
  }
  





.productRotate{
  animation:
      productRotate 0.8s ease-out forwards,
      productFloat 2s ease-in-out 0.8s infinite alternate;
}

/* 進場旋轉 */
@keyframes productRotate{
  0%{
      opacity:0;
      transform:scale(0.5) rotate(-180deg);
  }

  80%{
      opacity:1;
      transform:scale(1.1) rotate(10deg);
  }

  100%{
      opacity:1;
      transform:scale(1) rotate(0deg);
  }
}

/* 微晃動 */
@keyframes productFloat{
  from{
      transform:rotate(-1deg);
  }
  to{
      transform:rotate(1deg);
  }
}