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

@media screen and (min-width: 768px){
.Area_hero .Area_swiper_box .PD_layout-heroPDBN .PD .PD_into {left: 14.5%!important;width: 36%!important;}
.Area_hero .Area_hero--logo {position: absolute;top: 15%;left: 0%;width: 54%;}
}
@media screen and (max-width:767px){
  .Area_hero .Area_swiper_box .PD_layout-heroPDBN .PD .PD_into {left: 14.5%!important;width: 36%!important;}
  .Area_hero .Area_hero--logo {position: absolute;top: 15%;left: 0%;width: 54%;}
}

@media screen and (min-width: 768px){
.Area_title_lbtclass h3 {justify-content: left;margin-left: 134px;font-style: italic;}
}
@media screen and (max-width:767px){
  .Area_title_lbtclass h3 {justify-content: left;margin-left: 14.5vw;font-style: italic;}
}

@media screen and (max-width:767px){
  .btn_remind {transform: translateY(-100%);}
}

/*最高回饋*/
@media screen and (min-width: 768px){
.Area01 {}
.Area01 .layout_bn ul {grid-gap: 0;}
}
@media screen and (max-width:767px){
  .Area01 {}
  .Area01 .layout_bn ul {grid-gap: 0;}
}

/*登記活動*/
@media screen and (min-width: 768px){
.Area02 {}
.Area02 .warningTxt h3 {color: #000;}
.Area_danji .danji_box {margin-bottom: 0;}
}
@media screen and (max-width: 767px){
  .Area02 {}
  .Area02 .warningTxt h3 {padding-bottom: 3vw;color: #000;}
  .Area_danji .danji_box {margin-bottom: 0;}
}

/*主打品*/
@media screen and (min-width: 768px){
.Area03 {}
.Area03 .layout_PD01 {width: 96%;}
.Area03 .layout_PD01 ul {border-radius: 0;}
}
@media screen and (max-width: 767px){
  .Area03 {}
  .Area03 .layout_PD01 ul {border-radius: 0;}
}

/*副打品*/
@media screen and (min-width: 768px){
.Area04 {}
.Area04 .layout_PD01 {width: 96%;}
.Area04 .layout_PD01 ul {border-radius: 0;}
}
@media screen and (max-width: 767px){
  .Area04 {}
  .Area04 .layout_PD01 ul {border-radius: 0;}
}

/*品類*/
@media screen and (min-width: 768px){
.Area05 {}
.Area05 .layout_pd ul {width: 100%;display: flex;padding: 0;margin: 0 auto;justify-content: center;flex-wrap: wrap;grid-gap: 0;}
.Area05 .layout_pd ul li {width: calc(100%/4.3);min-width: inherit;padding: 0 5px 10px;}
}
@media screen and (max-width: 767px){
  .Area05 {}
  .Area05 .layout_pd ul{width: 100%;display: flex;justify-content: center;flex-wrap: wrap;grid-gap: 0;}	
  .Area05 .layout_pd ul li{width: calc(100%/4);min-width: inherit;padding: 0 0.5vw 1vw;}	
}

/*黏人精*/
.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, -62vw, 0px) !important;}
  .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
  .Area_hammerAD .Ahammer_text { font-size: 1.5em; line-height: 1.5em; height: 1em; top: 3.6vw;}
}