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

/*背景*/
@media screen and (min-width:767px){
.top_deco00 {z-index: -1;position:absolute;top: 1330px;left:0;width:100%;height: 100%; background: url(top_deco.png?t=1793443555885) no-repeat center;background-repeat:repeat-y;background-position: center top;pointer-events:none;}
}
/*版頭*/
/* @media screen and (min-width:767px){
  .Area_hero {height: 600px;}
  .Area_hero-visual_003 .Area_hero .Area_hero--tag {top: 8%;left: 0%;}
  .Area_hero-visual_003 .Area_hero .Area_hero--title  {top: 8%;left: 0%;}
  .Area_hero-visual_003 .Area_hero .Area_hero--PD  {top: 0%;left: 0%;}
  .Area_hero-visual_003 .Area_hero .Area_hero--subtitle {top:69.5%;left: 29%;}

.Area_hero .top_deco01 {position:absolute;top: 105px;left: 185px;z-index: 1;pointer-events: none;}
}
@media screen and (max-width:767px){
  .Area_hero {height: 57vw;}
  .Area_hero-visual_003 .Area_hero .Area_hero--tag {top: 0%;left: 0%;}
  .Area_hero-visual_003 .Area_hero .Area_hero--title  {top: 0%;left: 0%;}
  .Area_hero-visual_003 .Area_hero .Area_hero--PD  {top: 0%;left: 0%;}
  .Area_hero-visual_003 .Area_hero .Area_hero--subtitle {top: 67%;left: 29%;}

  .Area_hero .top_deco01 {position: absolute;top: 7vw;left: 20vw;width: 5%;}
} */


/*---版頭品輪播---*/
  .top_pd .Area_swiper_box .PD_layout li {background-color: transparent;}
@media screen and (min-width:768px){
  .Area_hero .top_pd input{position: absolute;left: 490px;}
  .top_pd {position: absolute;top: 630px;left: 150px;width: 950px;height: 500px;overflow: hidden;z-index: 99;}
  .top_pd .ly {width: 100%;height: 100%;}
  .top_pd .ly ul{width: 100%;height: 550px;padding: 0;}
  .top_pd .ly ul li{padding: 0 0 780px 0;}
  .top_pd .ly ul li .PD_into{text-align: left;}
  .top_pd .ly ul li .PD_into .PD_logo{width: 100%;position: absolute;left: -34px;top: -263px;}
  .top_pd .ly ul li .PD_into .PD_logo img{width: 31%;border-radius: 100%;}
  .top_pd .ly ul li .PD_into{position: absolute;width: 40%;left: 0px;top: 160px;z-index: 5;}
  .top_pd .ly ul li .PD_img{width: 39%;position: absolute;top: 16px;left: 347px;}
  /*文字*/	
  .top_pd .ly.PD_layout .PD_into h3{color: #fff;width: 100%;position: relative;left: 0;top: -17px;font-size: 1.8em;}
  .top_pd .ly.PD_layout .PD_into h4{color: #fff;position: relative;width: 100%;top: -12px;left: 0;font-size: 1.5em;}
  .top_pd .ly.PD_layout .PD_into p{color: #d8f1ff;width: 91%;font-size: 2em;position: relative;top: -10px;left: 21px;}
  .top_pd .ly.PD_layout .PD_into p del{color: #cacaca;font-size: 0.9em;}
  .top_pd .ly.PD_layout .PD_into p b{font-size: 0.9em;}
  .top_pd .ly.PD_layout .PD_into p span{font-size: 0.9em;}
  .top_pd .ly.PD_layout .PD_into p small{font-size: 0.9em;}
  .top_pd .ly.PD_layout .PD_into p .Price{font-size: 1.7em;}
  .top_pd .ly.PD_layout .PD_into p .Price,.top_pd .ly.PD_layout .PD p b,.top_pd .ly.PD_layout .PD p .money{
    color: #d8f1ff;
    font-weight: 900;
    background: none;
    background-image: repeating-linear-gradient(178deg, #d8f1ff 20%, #d8f1ff 100%) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }	
    .top_pd .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 130px !important;}

}

@media screen and (max-width:767px){
  .top_pd {position: absolute;top: 50vw;left: 4vw;width:100%;overflow: hidden;z-index: 99;margin: 0 auto;}
  .top_pd .ly {position:relative;top:10vw;padding:0;}
  .top_pd .ly ul{width: 91%;padding: 0;}
  .top_pd .ly ul li {padding: 0 0 68vw 0;}
  .top_pd .ly ul li .PD_into{text-align: left;}
  .top_pd .ly ul li .PD_into .PD_logo{width: 100%;position: absolute;left: -5vw;top: -33vw;}
  .top_pd .ly ul li .PD_into .PD_logo img{width: 31%;border-radius: 100%;}
  .top_pd .ly ul li .PD_into{position: absolute;width: 42%;left: 9vw;top: 21.5vw;z-index: 5;}
  .top_pd .ly ul li .PD_img{width: 45%;position: absolute;top: 10vw;left: 49vw;}
   /*文字*/	
  .top_pd  .ly  ul li .PD_into h3{color: #fff;width: 100%;position: relative;left: 0;top: 3vw;font-size: 1em;}
  .top_pd  .ly  ul li .PD_into h4{color: #fff;position: relative;width: 100%;top: 1vw;left: 0;font-size: 0.8em;}
  .top_pd  .ly  ul li .PD_into p{color: #d8f1ff;width: 100%;font-size: 0.9em;position: relative;top: 0vw;left: 0;}
  .top_pd  .ly  ul li .PD_into p del{color: #cacaca;}
  .top_pd  .ly  ul li .PD_into p .Price,.top_pd  .ly .PD_layout .PD p b,.top_pd  .ly .PD_layout .PD p .money{
    color: #d8f1ff;
    font-weight: 900;
    font-size: 1.5em;
    background: none;
    background-image: repeating-linear-gradient(178deg, #d8f1ff 20%, #d8f1ff 100%) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }	
    .top_pd .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 13vw !important;}

}
.top_pd .Area_swiper_box .PD_layout li, .Area_swiper_box .PD_layout li .PD_img img{border-radius:0!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: 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;}
}

/*活動倒數*/
.TimerNick {position: absolute;top: 309px;left: 37px;display: inline-block;z-index:8;text-align: center;letter-spacing: 0.2em;font-family: Arial, Helvetica, sans-serif;}
.TimerNick .FontStyle {display: inline-block;margin: 0 0 0 5px;padding: 0;border: 0;font-size: 30px;color: #fff;font-weight: normal;letter-spacing:1px;text-align: center;}
.TimerNick span {padding-left: 2px;font-size: 23px;letter-spacing: 0.1em;color: #fff;}
.TimerNick b { font-weight: normal;}
@media screen and (max-width:767px){
  .TimerNick  {width:100%;top: 32vw;left: 4vw;display: flex;column-gap: 0.3em;text-align: left;}
  .TimerNick .FontStyle {margin: -0.15em 0 0 0em;padding: 0;border: 0;font-size: 1em;letter-spacing: 0.1em;}
  .TimerNick span {padding-left: 0;font-size: 1em;letter-spacing: -0.05em;margin-left: 0.1em;margin-right: 0.3em;}
  .TimerNick span:first-child{ margin-top: -0.1em; }
}