/* 各頁面CSS */

/*切換PC置頂選單*/
.cantantBase1 { display: block;}
.cantantBase2 { display: none;}


/* 版頭 */
@media screen and (min-width: 768px){
  .hero { height: 1650px;}
  .hero-title { top: 110px; left: 215px;}
  .hero-title .lg-text { width: 530px;}
  .bg-deco .bgdeco_1 { height: 412px; background-size: auto 412px;}
}
@media screen and (max-width: 767px){
  .hero-title { padding: 7vw 0 0; width: 54%; left: 14%;}
}


/* 倒數 */
.TimerNick { position: absolute; top: 285px; left: 330px;}
.TimerNick .TIMER { margin: 0 auto; padding: 0; overflow: hidden; text-align: center; color:#fff; font-size: 26px; line-height: 40px; font-weight: 800; font-family: "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;}
.TimerNick small {position: relative; top: 0; font-size: 20px;}
.TimerNick .time_day { font-size: 20px; letter-spacing: .05rem;}
.TimerNick .FontStyle { position: relative; padding: 0 7px 0 0;font-size: 22px; text-align:center; color: #fff;}
.TimerNick .FontStyle b { display: inline-block; font-weight: 500; font-family: Century Gothic; width: 14px;}
  @media screen and (max-width:767px){
    .TimerNick { position: absolute; top: 26vw; left: 14%; transform: none; width: 53%; text-align: center; z-index: 999;}
    .TimerNick .TIMER { font-size: 8.5vw; line-height: 4vw; color:#fff;}
    .TimerNick small { margin: 0; top: inherit; font-size: 3.5vw; float: none;}
    .TimerNick .time_day { position: relative; font-size: 3.9vw; letter-spacing: 0; float: none; margin-right: -2px;}
    .TimerNick .FontStyle { padding: 0; font-size: 4.2vw; float: none; margin: -1.5vw;}
    .TimerNick .FontStyle b { margin: 0; width: 2vw; font-family:Helvetica; color:#fff;}
  }


/* 版頭品輪播 */
.top_pd .Area_swiper_box .PD_layout li, .Area_swiper_box .PD_layout li .PD_img img { border-radius: 0!important;}
@media screen and (min-width:768px){
  .top_pd { position: absolute; top: 75px; left: 758px; width: 245px; height: 340px; overflow: hidden; z-index: 9;}
  .top_pd .ly ul, .top_pd .ly ul li { padding: 0;}
  .top_pd .ly ul li .PD_into {text-align: center;}
  .top_pd .ly ul li .PD_into .PD_logo { display: none;}
  .top_pd .ly ul li .PD_into { width: 100%; position: relative; top: 6px;}
  .top_pd .ly ul li .PD_img { width: 100%; height: auto;}
  /* 文字 */	
  .top_pd .ly.PD_layout .PD_into h3 {color: #ce2227; width: 100%; font-size: 1.8em;text-align: center;}
}

@media screen and (max-width:767px){
  .Area_top .top_pd { position: absolute; top: 0; right: 5vw; width: 27vw; height: 34vw; overflow: hidden; z-index: 9;}
  .top_pd .ly ul li { padding: 0;}
  .top_pd .ly ul li .PD_into .PD_logo { display: none;}
  .top_pd .ly  ul li .PD_into  { padding: .05em 0 0;}
  .top_pd .ly ul li .PD_img { width: 100%; height: auto; padding: .5em .2em .05em;}
  /*文字*/	
  .top_pd .ly  ul li .PD_into h3 { color: #ce2227; font-size: .9em;}
}

/* hasBG調整 */
@media screen and (min-width:768px){
  .Area_boxstyle.Area_boxstyle--hasBackdrop .Area_boxstyle_box {
    background: url(Area_boxstyle_top_hasbg-B.png?t=1775628024379) top center / contain no-repeat !important;}
  .Area_boxstyle.Area_boxstyle--hasBackdrop:before { background: url(Area_boxstyle_hasbg_top-B.png?t=1775628024379) top center / 100% no-repeat, url(Area_boxstyle_hasbg_bottom-B.png?t=1775628024379) bottom center / 100% no-repeat, url(Area_boxstyle_hasbg_bottom-B.png?t=1775628024379) center top 80px / 100% calc(100% - 80px) no-repeat !important;}
}
@media screen and (max-width:767px){
  .Area_boxstyle.Area_boxstyle--hasBackdrop .Area_boxstyle_box {
    background: url(m_Area_boxstyle_top_hasbg-B.png?t=1775628024379) center top 0.5vw / contain no-repeat !important;}
  .Area_boxstyle.Area_boxstyle--hasBackdrop:before { background: url(m_Area_boxstyle_hasbg_top-B.png?t=1775628024379) top center / 100% no-repeat, url(m_Area_boxstyle_hasbg_bottom-B.png?t=1775628024379) bottom center / 100% no-repeat, url(m_Area_boxstyle_hasbg_bottom-B.png?t=1775628024379) center top 5vw / 100% calc(100% - 5vw) no-repeat !important;}

}

/* 移除公版設定 */
.Area .remove_box_style ul { background-color: transparent; grid-gap: 0;}
.Area .remove_box_style ul li { border: none !important; background-color: transparent;}
@media screen and (max-width:767px){
  .Area .remove_box_style ul { width: 100%; padding: 0;}
}

/* 品牌公版背景設定 */
.PD_layout-D1_01 .PD_slide { background-color: #fcd206;}
.PD_layout-D1_01 .PD h4 { color: #1117c1; font-weight: 900;}
.PD_layout-D1_01 .PD h4:hover { color: #d71163 !important;}
.PD_layout-D1_01 { padding-bottom: 30px;}
.PD_layout-D1_01 ul { width: 100%;}
.Area_grabmoney_NUM2 .PD_layout-btn li .PD h3 { color: #000; background: #fff;}
@media screen and (max-width:767px){
  .Area_grabmoney_NUM2 .PD_layout-btn { margin-top: -5vw;}
}

/* 熱銷排行 */
.Area_PD3 .PD_layout-btn li .PD h3 { color: #000; background: #fff;}
@media screen and (min-width:768px){ 
  .Area_PD3 .PD_layout-btn { margin-top: 25px;}
}
@media screen and (max-width:767px){
  .Area_PD3 .PD_layout-btn { margin-top: 3vw;}
}




/* 折價券 */
.Area_coupon .PD_layout.PD_layout-coupon3 .PD .divine_coupon1 { color: #121212 ; }
.Area_coupon .PD_layout.PD_layout-coupon3 .PD .threshold { color: #121212 ; }
@media screen and (min-width: 768px){
  .Area_coupon .layout_coupon { width: 90%; height: 160px ; }
}
@media screen and (max-width:767px){
  .Area_coupon .layout_coupon { width: 96% ; height: 20vw ; }
  .Area_coupon .layout_coupon ul { row-gap: 0 !important ; }
}



/* 登記 */
.danji_white .btn_reg .activityText p { color: #212121 !important; }
.danji_white .btn_reg .content p { color: #212121 !important; }
.danji_white .btn_reg .activityText .Tip { color: #212121 !important; }
.warningTxt h3 { padding: 0 ; color: #fff ; }

/*登記贈品文案顏色*/
.danji_white .danji_box ul li .activityText .gifts span { color: #2d36f7 ;} 
@media screen and (min-width:768px){
  .layout_btn ul { padding: 0 !important ; margin-bottom: 30px !important ; }
}
@media screen and (max-width: 767px){
  .layout_btn ul { padding: 0 !important ; margin-bottom: 2vw !important ; }
}


/* 捲軸 */
.swiper-scrollbar {background:rgba(255, 255, 255, 0.1) !important ;}
.swiper-scrollbar-white { background:rgba(255, 255, 255, 0.1) !important ; }
.swiper-scrollbar-drag {background: #fff !important ;}


/* 輪播微調 */
.Area_coupon_ppp .get_all img { width: 100% ; }
.Area_coupon_ppp .get_all { margin-bottom: -10px ; margin-top: 30px ; }
@media screen and (max-width:767px){
  .Area_coupon .Area_swiper { width: 102% ; }
  .Area_coupon_ppp .Area_swiper { width: 100% !important ; }
  .Area_carousel .Area_swiper { width: 102% !important ; }
  .Area_coupon_ppp .get_all { margin-bottom: -3vw; margin-top: 3vw; }
}



/*限搶預告*/
.Limited-Time .Area_swiper_box .PD_layout li {background-color: rgb(255, 255, 255);}
.Limited-Time .PD_layout[data-pd-h3="5"] .PD h3 span {padding: 0 .5em;}
.Limited-Time .PD_layout .swiper-scrollbar-drag {background: #fff;}
@media screen and (min-width:768px){
.Limited-Time { margin-bottom: 30px ; margin-top: -40px ; }
.Limited-Time .title01{width: 11%;margin-left: 0px;}
.Limited-Time .Area_swiper{margin: -422px 0px 0 105px;}
}
@media screen and (max-width: 767px){
.Limited-Time { margin-bottom: 3vw ; margin-top: -4vw ; }
.Limited-Time .title01 { width: 15% ; margin-left: -1vw ; }
.Limited-Time .Area_swiper {margin: -73vw 0 0 13vw;}
}




/*mo店好物推薦*/
.Area_page { overflow: hidden;}
/* --------------------------------------
* Page 頁籤_202405291900
* -------------------------------------- */
.NavArea_tabbar_page { margin: 0 auto 20px; width: 94%; }  
.NavArea_tabbar_page .Nav { overflow: visible; transform: translate3d(-30.5%, 0, 0);}  
.NavArea_tabbar_page .Nav_box { border-radius: 8px; overflow: hidden; padding: 0 2%;}
.NavArea_tabbar_page[data-num="2"] .Nav-wrapper { transform: translate3d(55.5%, 0, 0)!important}
.NavArea_tabbar_page[data-num="3"] .Nav-wrapper { transform: translate3d(43.0%, 0, 0)!important}
.NavArea_tabbar_page[data-num="4"] .Nav-wrapper { transform: translate3d(30.5%, 0, 0)!important}
.NavArea_tabbar_page[data-light="box"] .Nav ul { padding: 0 }
.NavArea_tabbar_page .Nav li { overflow: visible; }
@media screen and (min-width:768px){ 
  .NavArea_tabbar_page { display: block; }
}
/*頁籤高亮顏色設定 */  
.NavArea_tabbar_page .Nav .swiper-slide-active a { color:#fff;}
.NavArea_tabbar_page .Nav .swiper-slide-active i { display:block; border: 1px solid #000000 !important; background-color: #000000 !important;}
/*推編輯按鈕 */  
.NavArea_tabbar_page .Nav input { position: fixed; left: 30%}


/*Area_page*/
/* .Area_moplus {margin-bottom: 8vw;} */
.Area_page h3 { color: #fff; margin: 0; padding: 0}
@media screen and (min-width:768px){
  .Area_page { background-color: #142dd7 ; padding: 20px 0 ; border-radius: 1em }
  .Area_page h3 { color: #fff; margin: 0 auto 20px; padding: 0}
  .Area_page .PD_layout { width: 96%}
}
@media screen and (max-width:767px){
  .Area_page { width: 100%; background-color: #142dd7 ; padding: 5vw 2vw 3vw 2vw;; border-radius: 1em;left: -2vw;margin-bottom: -2vw; }
  .Area_page h3 { color: #fff; margin: 0 auto 2vw; padding: 0}
}


/* 下方公版組合 */
.Area_below .PD_layout-D1_03 ul::before {display: none;}
.Area_below .PD_layout-D1_03 .PD_slide {background-color: #fcd206 ;}
.Area_below .PD_layout-D1_03 .PD h3 {color: #000000;}
@media screen and (min-width:768px){
.Area_below .PD_layout2 {margin-top: 11px;}
}
@media screen and (max-width: 767px){
.Area_below .PD_layout2 {margin-top: 3vw;}
}


/* 1帶3公版 */
@media screen and (min-width:768px){
  .Area_good { margin-bottom: 60px ; }
  .Area_good .box { background: url(PD_bg.png?t=1775628024380) top center no-repeat ; background-size: 100%; width: 900px ; margin: 0 auto 80px !important ; }
  .Area_good .PD_box { margin-bottom: 10px; }
  .Area_good .box .BN ul li .PD_into .PD_logo { width: 65% ; }
  .Area_good .box .BN ul li .PD_into h3 { width: 100%; font-size: 33px; color: #000 ; line-height: 2em; text-align: center ; padding: 0 0 0 10px;}
  .Area_good .layout_good { padding-bottom: 30px ; background-color: #fde716 ; }
  .Area_good .layout_good ul { width: 95% ; padding: 10px 0px; border-radius: 30px; }

  /* 文案 */ 
  .Area_good .logo2 { position: relative ; width: 100% ; height: 130px ; }
  .Area_good .logo2 ul{grid-gap: 0;}
  .Area_good .logo2 ul .PD_into{padding: 0;}
  .Area_good .logo2 .PD_layout .PD_into h4{width: 100%;position: relative; overflow: hidden;display: flex;justify-content: center;font-size: 50px;top: -10px;height: 62px;}
  .Area_good .logo2 .PD_layout { padding-top: 43px ; }	
  .Area_good .logo2 .PD_layout .PD b{color: #212121 ;position: relative ; width: 30% ; left: -15px ; }
  .Area_good .logo2 .PD_layout .PD span{color: #fff ;position: relative ; font-weight: 700;width: 58% ; left: 30px ;}	
}
@media screen and (max-width:767px){
  .Area_good { margin-bottom: -8vw ; }
  .Area_good .box { width: 100% ; background: url(PD_bg.png?t=1775628024380) top center no-repeat ; padding: 0 ; border-radius: 0 ; background-size: 100%; margin: 0 auto 7vw ; }
  .Area_good .box .BN ul li .PD_into h3 { width: 70% ; color: #121212 ; padding-top: 2vw; }
  .Area_good .box .BN ul li .PD_into .PD_logo { width: 40% ; margin-left: 4vw ; margin-top: 1vw; }
  .Area_good .layout_good { padding-bottom: 4vw ; margin-top: -1vw ; background-color: #fde716 ; }
  .Area_good .layout_good ul { width: 96% ; padding: 0 ; margin-top: 3vw;  }

  /* 文案 */ 
  .Area_good .logo2 { position: relative ; top: -1vw ; height: 12vw ;}
  .Area_good .logo2 ul{grid-gap: 0;}
  .Area_good .logo2 ul .PD_into{padding: 0;}
  .Area_good .logo2 .PD_layout .PD_into h4{width: 100%;position: relative;top: 4vw ; left: 0 ; margin: 0 auto;font-size: 23px ;display: flex;padding-bottom: 3.7vw;overflow: hidden;justify-content: center;}
  .Area_good .logo2 .PD_layout .PD b{color: #212121 ; position: relative ; width: 30% ; margin-left: -.5vw ; }
  .Area_good .logo2 .PD_layout .PD span{color: #fff ;position: relative;font-weight: 700;width: 60% ; left: 3vw ;}	
}


/* 嚴選大牌 */
.Area_brand .PD_layout .PD h3 { color: #142dd7 !important ; }
.Area_brand .PD_layout .PD h4 { color: #212121 !important ; }
@media screen and (min-width:768px){
}
@media screen and (max-width: 767px){
  .Area_brand .layout_brand { padding: 0 !important ; }
}

  

/* 輪播BN */
.Area_BN02 .PD_layout .swiper-scrollbar-drag {background: #fff;}
.Area_BN02 .swiper-scrollbar {background:rgba(255, 255, 255, 0.1)}
@media screen and (min-width:768px){
  .Area_BN02 .Area_swiper_box { height: 200px ; }
}
@media screen and (max-width:767px){
  .Area_BN02 .Area_swiper_box {height: 38vw;}
  .Area_BN02 {margin: 4vw 0 4vw 0vw;}
}




/* 品類按鈕 */
@media screen and (min-width:768px){
  .Area_super { padding: 50px 0 30px ; }
  .Area_super .layout_super { width: 85% ; }
  .Area_super .layout_super ul { grid-gap: 1em !important ; }
}
@media screen and (max-width: 767px){
  .Area_super { padding: 3vw 0 ; }
  .Area_super .layout_super ul { grid-gap: .5em !important ; }
}