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


/*背景*/
@media screen and (min-width:768px){
  .bg_01 { z-index:-46; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
  }
  @media screen and (max-width:767px){
  .m_bg { z-index: 0; position: absolute; top: 10.5vw; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; pointer-events:none; background-size: 100%;}
  }



  /*版頭區塊*/
  @media screen and (min-width:768px){
  .Area_top {height: 1530px;}
  .Area_top .car {position: absolute;left: 460px;top: 370px;z-index: 2;}
  .Area_top .cloud01 {position: absolute;left: -140px;top: 110px;z-index: 2;}
  .Area_top .cloud02 {position: absolute;left: 1070px;top: 290px;z-index: 2;}
}
  @media screen and (max-width:767px){
  .Area_top {height: 162vw;}
  .Area_top .mb_01{position:absolute; top:0; left:0 ;width: 100%; z-index:0;}
  .Area_top .car {position: absolute;width: 77%;top: 37vw;left: 19vw;}
  .Area_top .cloud01 {position: absolute;width: 14%;top: 7vw;left: -7vw;}
  .Area_top .cloud02 {position: absolute;width: 16%;top: 37vw;left: 88vw;}
  }


/*版頭主標微調*/
.title01{z-index: 0;position: absolute;}
.title01 .PD_layout .PD img { width:100%!important; }
.title01 .PD_layout .PD a { pointer-events: none; }
.title01 .PD_layout .PD_slide:hover {transform: translateY(0); }
.title01 .PD_layout .PD_slide {min-width: 100%;}
@media screen and (min-width: 768px){
.title01 {top: 60px;left: 40px;width: 72%;}
}
@media screen and (max-width:767px){
.title01{width: 100%; }
.title01 ul{ padding: 0!important; }
.title01 .PD_layout {position: relative;top: 4vw;left: -3vw;width: 83%;}
.title01 .PD_layout .PD img { width: 100%!important; }

}



/*日期*/
.TIMER_DAY {
  display:flex;
  justify-content: center;
  flex-wrap:nowrap;
  position: absolute;
  top: 10px;
  left: 450px;
  width:25%;
  height: 206px;
  animation: time 1s ease forwards;
  animation-delay: 1s;
  opacity: 0;
  padding: 36px 36px 0 36px;
  font-size:46px;
  font-weight: bold;
  font-family: "Century Gothic";
  z-index: 0;
  /* transform: rotate(5deg) scale(0.85); */
  box-sizing: border-box;
  color: #ffffff;
  /* background: url(datebg.png?t=1782697900795)no-repeat center / 88% ;*/
  } 
.TIMER_DAY small {font-size: 40px; font-weight: 100; position: relative;}
.TIMER_DAY #sendMonth { display: inline-block; text-align: right;  letter-spacing: -2px;} 
.TIMER_DAY #sendToday { display: inline-block;  text-align: left; letter-spacing: -2px;}
.TIMER_DAY .sendtxt { font-size: 0.8em; font-weight: 500; margin:12px 0 0 3px; text-align: left; width: 90%;}
.TIMER_DAY .box{ width: 100%; display: flex; justify-content: right; align-items: center;height: 80px; }
@media screen and (max-width: 736px){ 
.TIMER_DAY {position: absolute;width: 34%;top: -1.7vw;left: 43vw;font-size: 6vw;letter-spacing: 0;padding: 4vw 4vw 0 4vw;text-align: left;margin: 0;font-weight: 900;height:22vw;/* transform: rotate(5deg) scale(0.78); */}
.TIMER_DAY small {font-size: 4vw;}    
.TIMER_DAY #sendMonth {display: inline-block; font-size: 1em; }
.TIMER_DAY #sendToday {display: inline-block; font-size: 1em; }
.TIMER_DAY .sendtxt {font-weight: 500;font-size: 0.8em;  margin:0.3vw 0 0 0.5vw;}	
.TIMER_DAY .box{ height: 8vw; }
}
@keyframes time{
  0%{ opacity: 0;}
  100%{ opacity: 100; }
}


/*副標輪播*/
.Area_top .topPD2 {position: absolute;top: 340px;left: 90px;width:420px;height: 167px;overflow: hidden;z-index: 21;}
.Area_top .topPD2 ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: inherit;}
.Area_top .topPD2 ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
.Area_top .topPD2 ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}
@media screen and (min-width: 768px){
  .Area_top .topPD2 ul.PD_wrapper li img{width: 100%;}
}

@media screen and (max-width:767px){
  .Area_top .topPD2 {width: 69%;height: 18vw;position: absolute;top: 32.7vw;left: -6vw;overflow: hidden;}
  .Area_top .topPD2 ul.PD_wrapper li img{width: 62%;}
}


/*輪播物件*/
.Area_topbn2 {top: 1010px;height: 491px;left:0;z-index: 2;}
.Area_topbn2 .box { overflow: hidden;  }
.Area_topbn2 .Area_swiper_box{width: 92%;padding-left: 70px;}
@media screen and (max-width: 767px) {
.Area_topbn2  {top: 98.5vw;height: auto;left:0;}
.Area_topbn2 .Area_swiper_box {width: 100%;padding-left: 10.8vw;}
.Area_topbn2 .PD_layout .PD p b{display: inline}
}

/*輪播物件小標*/
.topPDtitle{position: absolute;left: -8px;top: -10px;width: 88px;}
@media screen and (max-width: 767px) {
  .topPDtitle{left: -.5vw;top: 0vw;width: 10.5vw !important;}
}



/*間距*/
.Area_bottom {margin-bottom: -20px !important;}
@media screen and (max-width:767px){
  .Area_bottom {margin-bottom: -5vw !important;}
}



/*活動倒數*/
.TimerNick2 {display:inline-block; height: 57px;z-index:99;font-weight: 700; width: 55%; text-align:center; position: relative; background-color: #fff; border-radius: 50px; padding: 1% 0 0.5%; margin: 0 0 12px;}
.TimerNick2 .FontStyle2 {display: inline-block;margin: 0 0 0 2px;padding: 0;border: 0;font: bold 40px/30px Arial;color: #ff8c1e;border-radius:5px;letter-spacing: 0px;text-align: center;}
.TimerNick2 span {padding-left: 2px;font: 400 37px/48px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0em;color: #1a1a1a;}
@media screen and (max-width:767px){
.TimerNick2 { width: 73%;  height:5vw; background-size:100%;  transform: scale(0.85); padding: 2% 0 2%; margin: 0 0 1vw;}
.TimerNick2 .FontStyle2 {margin: 0;padding: 0;border: 0;font: bold 5vw/5vw Arial;}
.TimerNick2 span {padding-left:0;font: normal 5vw/5vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;}
}




  @media screen and (max-width: 767px) {
    .pdaa.PD_layout[data-pd-li=BN] ul{ padding: 0 0em;grid-gap: 0em;}
}
  @media screen and (min-width: 768px) {
    .pdaa.PD_layout[data-pd-li=BN] ul{padding: 0 0px;grid-gap: 0px;}
}



  @media screen and (min-width:768px){
	.PD_layout.layout_PD01{ width: 97%;}
	}
	@media screen and (max-width:767px){
	.PD_layout.layout_PD01{ width: 100%;} 
	}



	@media screen and (min-width: 768px) {
		.PD_layout ul {padding: 30px 0;}
	}




  @media screen and (min-width: 768px) {
    .Area_swiper_box.bb01 {padding-bottom: 25px;background-color: #ffffff;}
}
@media screen and (max-width: 767px) {
  .Area_swiper_box.bb01 {padding-bottom: 5vw;background-color: #ffffff;}
}



/*毛爸媽熱搜清單*/
/*版頭公版上下標.關閉*/
.Area08 .layout_item .imgTag {display: none !important;}
.Area08 .layout_item .imgTagBottom {display: none !important;}
.Area08 .layout_item .prdImgWrap .imgTagRectangle {display: none !important;}
@media screen and (min-width:768px){
.Area08 {margin-bottom: -20px;}
.Area08 .Area_swiper {width: 93%;left: 0;top: 0;}
.Area08 .layout_PD li {background: url("Area08_bg.png?t=1782697900795") center top / 100% no-repeat scroll;}	
.Area08 .layout_PD .PD_slide {height: 370px;}
.Area08 .layout_PD .PD_slide .PD_img img {width: 75%;margin: 0% 0 0 0;margin-top: 34%;}
.Area08 .layout_PD .PD_slide .PD_into h3 {position: relative;top: 10px;left: 0;font-size: 2.5em;line-height: 1.5em;color: #ffeb99;text-align: center;font-weight: bold;}
}
@media screen and (max-width:767px){
  .Area08 {margin-bottom: -7vw;}
  .Area08 .layout_PD {width: 100%;}
  .Area08 .layout_PD .PD_img {padding: 0;}
  .Area08 .layout_PD li {background: url("Area08_bg.png?t=1782697900795") center top / 100% no-repeat scroll;}
  .Area08 .layout_PD .PD_slide {height: 41vw;}
  .Area08 .layout_PD .PD_slide .PD_img img {width: 70%;margin: 35% 0 0 0;}
  .Area08 .layout_PD .PD_slide .PD_into h3 {position: relative;top: 1vw;left: 0;font-size: 0.9em;line-height: 1.4em;margin: 0;color: #ffeb99;text-align: center;}
}





/*特談新品嚐鮮價到輪播*/
.Area_key{}
.Area_key .box2 {width: 100%;position: relative;overflow: hidden;margin: 10px auto 0;}
.Area_key .box2 .Area_swiper_box ul.PD_wrapper { position: relative; display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; background-color: rgba(0,0,0,0); grid-gap: 0 }
.Area_key .box2 .Area_swiper_box ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 24px 10px 23px 10px; min-width: auto; background-color: transparent; border: none; border-radius: 0; background:url(mPD5_bg.png?t=1782697900795) no-repeat top / 100% ;}
.Area_key .box2 .Area_swiper_box ul.PD_wrapper li .PD_into{ padding: 52px 0 0; }
.Area_key .box2 .Area_swiper_box ul.PD_wrapper li .PD_into p{ display: none; }
.Area_key .box2 .PD_layout .PD h3 span{ background-color:transparent; color: #fff; font-size: 25px; max-width: 100%;  padding: 0; font-weight: 700;}
.Area_key .box2 .PD_layout .PD h4 { color: #fff; font-size: 25px;}
.Area_key .box2 .PD_layout .PD h4 b{ display:none; }
.Area_key .box2 .PD_layout .PD h4 span{ display: block; width: 92%; margin: 6px auto 0; font-weight: 700;}
@media screen and (max-width: 767px) {
  .Area_key{}
  .Area_key .box2 {width:98%;margin: 2vw 0 0 2vw;}
  .Area_key .box2 .Area_swiper_box { width: 100%; }
  .Area_key .box2 .Area_swiper_box ul.PD_wrapper { padding: 0 0 1vw;}
  .Area_key .box2 .Area_swiper_box ul.PD_wrapper li {padding:2.5vw 0 3.5vw 0;  background:url(mPD5_bg.png?t=1782697900795) no-repeat top / 100% ;}
  .Area_key .box2 .Area_swiper_box ul.PD_wrapper li .PD_into{ padding: 4.8vw 0 0; }
  .Area_key .box2 .PD_layout .PD h3 span{ font-size: 4vw; max-width: 88%;}
  .Area_key .box2 .PD_layout .PD h4{ font-size: 3.5vw; }
  .Area_key .box2 .PD_layout .PD h4 span{ width: 82%; margin: -.6vw auto 0;}

}