
/*PC背景*/
@media screen and (min-width:767px){
  .bg_fix {z-index: 0;position:absolute;top: 0;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}
  .bg_fix2 {z-index: 0;position:absolute;top: 797px;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}
  .bgtop_fixed { z-index:-1; position:fixed; top:0; left:0; width:100%; min-width:1220px; height:100%; background-repeat:repeat-y; background-position:center top; pointer-events:none; }
  .bg_deco {z-index:-1;position:absolute;top:850px;left:0;width:100%;height:100%;background-position:center 0px;background-repeat:repeat-y;pointer-events:none;}	
  }
  
  /*mb背景*/
  @media screen and ( max-width:767px) {
  .bgtop01 { z-index:0; position:absolute; top:44px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top; background-size:100%; }	
  .bgtop02 { z-index:0; position:absolute; top:10vw; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top; background-size:100%; }	
  .bg03{ z-index:-1; position:fixed; top:0vw; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position:center top; background-size:100%; }	
  .bg02{ z-index:-1; position:absolute; top:0vw; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position:center top; background-size:100%;  }	
  }
  

/*版頭區塊*/
.topdeco{ position:absolute; pointer-events: none; z-index: 5;}  
.topdeco img{ width: 100%; }
@media screen and (min-width:768px){
.Area_top {height:507px; }
.deco01 { top: 101px; left: 672px; width: 283px;}

}
@media screen and (max-width:767px){
.Area_top {height:53.5vw;}
.Area_top .mb_01{position:absolute; top:0; left:0 ;width: 100%; z-index:0;}
.deco01 {top: 14.5vw; left: 72vw; width: 27vw;}
}




/*版頭主標微調*/
.title01{ z-index:2;  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:0px;left:0px; width:100%; }
}
@media screen and (max-width:767px){
.title01{width: 100%; }
.title01 ul{ padding: 0!important; }
.title01 .PD_layout {position: relative;top:0;left:0;width: 100%; }
.title01 .PD_layout .PD img { width: 100%!important; }

}

/*副標輪播*/
.Area_top .topPD2 {position: absolute; top: 318px; left:138px; width:643px;height: 120px;overflow: hidden; z-index:2;}
.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: 61%; }
}

@media screen and (max-width:767px){
  .Area_top .topPD2 {width: 67%; height: 13vw; position: absolute; top: 35.5vw; left: 14vw; overflow: hidden;}
  .Area_top .topPD2 ul.PD_wrapper li img{ width: 71%; }
}


/*日期*/
.Area_top .date .PD_layout .PD a { pointer-events: none; }
.Area_top .date ul{ padding: 0!important; }
.Area_top .date{ z-index: 5; position: absolute;}
@media screen and (min-width: 768px){
.Area_top .date {top:320px;left:57px; width:13%;}
}
@media screen and (max-width:767px){
  .Area_top .date {top:33.5vw;left:5vw; width:14%;}
}


/*日期*/
.TIMER_DAY {display:flex; justify-content: center; flex-wrap:wrap; position: absolute; top: 43px; left: 90px; width:23%; height: 162px;   
  padding: 30px 16px 0 34px; font-size:57px; font-weight: bold; font-family: "Century Gothic"; z-index: 3;  transform: rotate(-21deg) scale(0.75);
   box-sizing: border-box;color: #0a4d80;/* background: url(datebg.png?t=1784104194847)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.7em; font-weight: 700; margin:-37px 0 0 3px; text-align: center; width: 90%;}
.TIMER_DAY .box{ width: 100%; display: flex; justify-content: center; align-items: center;height: 67px; }
@media screen and (max-width: 736px){ 
.TIMER_DAY { position: absolute;width: 34%;top: 3.6vw;left: 2.2vw;font-size: 6.5vw;letter-spacing: 0; padding:4vw 1vw 0 2vw; text-align: left;margin: 0;font-weight: 900; height:19vw;  transform: rotate(-21deg) scale(0.7);}
.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: 700;font-size: 0.8em;  margin:-3.3vw 0 0 0.5vw;}	
.TIMER_DAY .box{ height: 8vw; }
}


/*區背景*/
.Area .bg, .Area .bg_btom{ position: absolute;pointer-events: none;z-index:0; }
@media screen and (min-width: 768px){
  .Area .bg, .Area .bg_btom{ left: 50%; transform: translateX(-50%); width: 2000px;}
  .AreaPD1:before{ left: 50%; transform: translateX(-50%); }

  .AreaPD1 .bg {top:132px;left: 50%;}	
  .AreaPD1 .bg_btom {bottom:-50px;}	
  .AreaPD1:before{ content:''; width: 2000px; height: 94%; background:url(AreaPD1_center.png?t=1784104194847) repeat-y center / 100%; position: absolute; top: 170px;} 

  .AreaLogo .bg {top:891px;left: 50%; z-index: -1;}	
}
@media screen and (max-width:767px){
  .AreaPD1 .bg {top:14vw;left:0;width:100%;  }	
  .AreaPD1 .bg_btom {bottom:-5vw;left:0;width:100%; }	
  .AreaPD1:before{ content:''; width: 100%; height: 94%; background:url(mAreaPD1_center.png?t=1784104194847) repeat-y center / 100%; position: absolute; top: 21vw; left: 0;}

  .AreaLogo .bg {top:96vw;left:0;width:100%; z-index: -1; }	
}

/*區標*/
.Area_title{ margin-bottom: 10px; }
@media screen and (max-width:767px){
  .Area_title{ margin-bottom: .5vw; }
}


/*版頭攻略+品*/
.AreaActive ul { grid-gap: 0!important; }
.AreaActive02 .Area_bn-grid-1x1 ul { padding:0!important; }
.AreaActive02-2 .Area_bn-grid-3x1 ul { padding:0!important; grid-gap: 0!important;}
.AreaActive02-2 { display: flex; }
@media screen and (min-width: 768px){
  .AreaActive ul { padding:0!important; }
  .AreaActive02 { margin-bottom: -49px; }
  .AreaActive02-2 { gap:0 15px; }
  .AreaActive02-2 .Area_pd-carousel{ width: 53%; }
  .AreaActive02-2 .Area_bn-grid-3x1{ width: 46%; }
}
@media screen and (max-width:767px){
  .AreaActive02 { margin-bottom: -5vw; }
  .AreaActive02-2 { gap:0 2vw; }
  .AreaActive02-2 .Area_pd-carousel{ width: 47%; }
  .AreaActive02-2 .Area_bn-grid-3x1{ width: 50%; padding-right: 2vw;}
}


/*作圖區*/
@media screen and (min-width: 768px){
  .AreaHot .Area_content ul{ padding:0!important; grid-gap:15px; }
}
@media screen and (max-width:767px){
  .AreaHot .Area_content ul{ grid-gap:1.5vw; }
}

/*品類按鈕*/
@media screen and (min-width: 768px){
  .Area_group-2 .Area_bn-grid-3x1 ul{ padding:0!important; grid-gap: 15px!important;}
}
@media screen and (max-width:767px){
  .Area_group-2 .Area_bn-grid-3x1 ul{ grid-gap: 1.5vw!important;}
}


/*關鍵字輪播*/
.Area_group-4 .Area_pd-carousel h4, .Area_group-4 .Area_pd-carousel p, .Area_group-4 .Area_pd-carousel .PD_img{ display: none!important; }
.Area_group-4 .Area_pd-carousel .PD_layout .PD_into{ padding: 0 0 1em; }
.Area_group-4 .Area_pd-carousel li{ background: transparent; width: fit-content !important;}
.Area_group-4 .Area_pd-carousel li h3 { max-height: 4em!important; background-color: #ff8e8e!important; border-radius: 45px!important;}
.Area_group-4 .Area_pd-carousel .PD_layout[data-pd-h3="5"] .PD h3 span{ background-color: transparent; font-size: 2.2em; color: white; white-space: nowrap; padding: .5em .5em; text-overflow: clip; line-height: .8em; max-width: 100%;}
.Area_group-4 .Area_pd-carousel .Area_swiper_box{ padding-bottom: 3px; }
@media screen and (max-width:767px){
  .Area_group-4 .Area_pd-carousel li h3 { max-height: 2.4em!important;}
  .Area_group-4 .Area_pd-carousel .PD_layout[data-pd-h3="5"] .PD h3 span{ font-size: 1.2em;  border-radius: 45px;  padding: 1vw 3vw; line-height: 1.6em;}
  .Area_group-4 .Area_pd-carousel .PD_layout .PD_into{ padding: 0 0 .6em; }
}


/*BN+輪播*/
@media screen and (min-width: 768px){
  .AreaPD1 .Area_bn-grid-1x1 ul{ padding:0!important;}
}


/*側標輪播-作圖區*/
.Area_group-5 .Area_content .PD_layout li p, .Area_group-5 .Area_content .PD_layout .PD h4 b { display: none!important; }
.Area_group-5 .Area_content .PD_layout[data-pd-h3="5"] .PD h3 span{ background-color: transparent; color: #2e97e5; font-size: 1.7em; font-weight: 700; max-width: 100%; text-overflow: clip;}
.Area_group-5 .Area_content .PD_layout[data-pd-h3="5"] .PD h4{  font-size: 1.6em; }
.Area_group-5 .Area_content .Area_swiper_box .PD_layout li, .Area_swiper_box .PD_layout li .PD_img img{ border-radius: 0; }
@media screen and (min-width: 768px){
  .Area_group-5 .Area_pd-carousel2{ padding-bottom: 20px; overflow: hidden;}
  .Area_group-5 .Area_content .Area_pd-carousel2 .topPD {  background-size: 70%; background-position-x: left;}
  .Area_group-5 .Area_content .topPD .Area_swiper{ top: 18px; }
  .Area_group-5 .Area_content .PD_layout li{ background: url(PD_bg.png?t=1784104194847) no-repeat top / 100%;  padding: 20px 6px 25px;}
  .Area_group-5 .Area_content .PD_layout .PD_into{ padding-top: 20px; }
}
@media screen and (max-width:767px){
  .Area_group-5 .Area_content .topPD{ margin-bottom: -2vw; }
  .Area_group-5 .Area_content .PD_layout li{ background: url(PD_bg.png?t=1784104194847) no-repeat top / 100%;  padding: 2vw 0vw 2vw; margin-bottom: -2vw;}
  .Area_group-5 .Area_content .PD_layout[data-pd-h3="5"] .PD h3 span{ font-size: 1.1em; padding: 0;}
  .Area_group-5 .Area_content .PD_layout[data-pd-h3="5"] .PD h4{  font-size: 1.1em;  margin: -1.5vw 0 3vw;}
  .Area_group-5 .Area_content .PD_layout .PD_into{ padding: .3em .7em 0; }
}


/*攻略*/
@media screen and (min-width: 768px){
  .Area_group-6 .Area_bn-carousel:first-child ul{ height: 161px; }
  .Area_group-6 .Area_bn-carousel:last-child ul{ height: 392px; }
}
@media screen and (max-width:767px){
  .Area_group-6 .Area_bn-carousel:first-child ul{ height: 21vw; }
  .Area_group-6 .Area_bn-carousel:last-child ul{ height: 40vw; }

}

/*折價券*/
.PD_layout-coupon3 .PD_img{ padding: 0; }
@media screen and (max-width:767px){
  .PD_layout-coupon3{ margin-bottom: 3vw; }
}
/*登記*/
.Area_danji .danji_box {  margin-bottom: -12px; }
@media screen and (max-width: 767px) {
  .Area_danji .danji_box {  margin-bottom: 0em; }
  .warningTxt h3{ padding: 0 0 1em  }
}


/*3P券*/
.Area_coupon_ppp .Area_swiper_box .swiper-pagination{ bottom: 6px !important; }
@media screen and (max-width:767px){
  .Area_coupon_ppp .Area_swiper_box .swiper-pagination{ bottom: .5vw !important; }
  .Area_coupon_ppp .Area_swiper_box{ padding-bottom: 2vw; }
}


/*3P輪播-作圖區*/
.Area_group-7 .Area_pd-carousel .PD_layout li{ background: url(PD_bg2.png?t=1784104194847) no-repeat top / 100% ; }
.Area_group-7 .Area_pd-carousel .PD_layout[data-pd-pdlogo] .PD .PD_logo{ position: absolute; border-radius: 30px; overflow: hidden; }
.Area_group-7 .Area_pd-carousel .PD_layout .PD h3{ color: #593521;  }
@media screen and (max-width:767px){
  .Area_group-7 .Area_pd-carousel .PD_layout[data-pd-pdlogo] .PD .PD_logo {top: 3vw; left: 12vw;  width: 46%; }
  .Area_group-7 .Area_pd-carousel .PD_layout .PD h3{ margin: -49.5vw 0 41vw; font-size: 1.05em;}
  .Area_group-7 .Area_pd-carousel .PD_layout .PD_img{ padding-top: 18vw; }
}
@media screen and (min-width: 768px){
  .Area_group-7 .Area_pd-carousel .PD_layout[data-pd-pdlogo] .PD .PD_logo {top: 18px; left: 85px;  width: 46%; }
  .Area_group-7 .Area_pd-carousel .PD_layout .PD h3{ margin: -337px 0 294px; font-size: 1.7em;}
  .Area_group-7 .Area_pd-carousel .PD_layout .PD h4{  font-size: 1.3em; }
  .Area_group-7 .Area_pd-carousel .PD_layout .PD_img{ padding-top: 120px; }
  .Area_group-7 .Area_pd-carousel .PD_layout .PD_into{ padding-bottom: 1.5em; }
}


/*3P輪播-BN*/
@media screen and (min-width: 768px){
  .Area_group-7 .Area_bn-carousel ul{ height: 180px; }
}
@media screen and (max-width:767px){
  .Area_group-7 .Area_bn-carousel ul{ height: 23vw; }
}


/*logo*/
@media screen and (max-width:767px){
  .AreaLogo .Area_content ul{  padding:0 2vw 0!important; grid-gap: 0!important; }
}
