@charset "utf-8";

/* 版頭 */
.deco01 { position: absolute ; width: 100% ; top: 0px ; right: 700px ; }
.deco02 { position: absolute ; width: 100% ; top: 0px ; left: 740px ; }
.leaf { position: absolute ; width: 100% ; top: 0px ; left: 740px ; }
/* .Area_leaf { height: 900px ; margin: auto ; } */
@media screen and (max-width:767px){
  .deco01 { position: absolute ; width: 31% ; top: 2vw ; right: 72vw ; }
  .deco02 { position: absolute ; width: 35% ; top: 0vw ; left: 77vw ; }
  .leaf { position: absolute ; width: 35% ; top: 0vw ; left: 77vw ; }
  .Area_leaf { height: 80vw ; position: absolute ; overflow: hidden ; }
}


/* 日期 */	
.TIMER_DAY { position:absolute ; top: 119px ; left: 418px ;z-index:3;display:inline-flex;font-size: 48px ; color: #74432c ;letter-spacing:0;text-align:center;align-items: baseline; justify-content: center; font-family: "Times New Roman", serif;font-weight: 300; }
.TIMER_DAY small {font-size:25px;line-height:5px; letter-spacing: -0.5px; padding-top: 12px; }
.TIMER_DAY #sendMonth {text-align: center;display: inline-block;}
.TIMER_DAY #sendToday {text-align: center;display: inline-block;}
@media screen and (max-width:767px){	
.TIMER_DAY { position: absolute ; top: 12.4vw ; left: 43vw ; z-index: 2 ; display: inline-flex ; font-size: 5.5vw ; color: #74432c ;letter-spacing:0;text-align:center;align-items: baseline; justify-content: center;font-family: "Times New Roman", serif;font-weight: 300; }
.TIMER_DAY small { font-size: 3vw ; line-height: 5px ; padding-top: 1vw ; }
.TIMER_DAY #sendMonth {text-align: center;display: inline-block; }
.TIMER_DAY #sendToday {text-align: center;display: inline-block; }
}


/* 微調 */
.layout_4pda { padding: 20px 0 ; }
@media screen and (max-width:767px){
    .layout_4pda { padding: 2vw 0 0 ; }
}



/* 今日限定價 */
.Area_today .topPD { height: 640px ; }
.layout_today { padding-top: 60px ; }
@media screen and (max-width:767px){
    .Area_today .topPD { height: 75vw ; }
    .layout_today { padding-top: 7vw ; }
}



/* 超人氣熱搜品類 */
.layout_move ul li h3 { color: #fff !important ; font-size: 35px !important ; line-height: 1.5em !important ;  }
.layout_move ul li .PD_img { padding-top: 0 !important ; width: 85% !important ; margin: 16px 26px 0 !important ; }
@media screen and (max-width:767px){
    .layout_move ul li h3 { color: #fff !important ; font-size: 4vw !important ; line-height: 1.5em !important ;  }
    .layout_move ul li .PD_img { padding-top: 0 !important ; width: 85% !important ; margin: 1vw 2.6vw 0 !important ; }
}


.leaf {
  position: absolute;
  top: 10px;
  width: 6% ;
  pointer-events: none;
}

.leaf1 {
  left: 20%;
  animation: leafLeft 15s linear infinite;
}

.leaf2 {
  left: 70%;
  animation: leafRight 18s linear infinite;
  animation-delay: -8s;
}

@keyframes leafLeft {
  0% {
      transform: translate(0, -50px) rotate(0deg);
      opacity: 0;
  }

  10% {
      opacity: 1;
  }

  25% {
      transform: translate(-80px, 180px) rotate(-20deg);
  }

  50% {
      transform: translate(100px, 350px) rotate(15deg);
  }

  75% {
      transform: translate(-120px, 550px) rotate(-15deg);
  }

  100% {
      transform: translate(80px, 800px) rotate(20deg);
      opacity: 0;
  }
}

@keyframes leafRight {
  0% {
      transform: translate(0, -50px) rotate(0deg);
      opacity: 0;
  }

  10% {
      opacity: 1;
  }

  25% {
      transform: translate(100px, 200px) rotate(15deg);
  }

  50% {
      transform: translate(-120px, 400px) rotate(-20deg);
  }

  75% {
      transform: translate(80px, 600px) rotate(15deg);
  }

  100% {
      transform: translate(-100px, 800px) rotate(-15deg);
      opacity: 0;
  }
}