/* 各頁面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=1775626615861) top center / contain no-repeat !important;}
  .Area_boxstyle.Area_boxstyle--hasBackdrop:before { background: url(Area_boxstyle_hasbg_top-B.png?t=1775626615861) top center / 100% no-repeat, url(Area_boxstyle_hasbg_bottom-B.png?t=1775626615861) bottom center / 100% no-repeat, url(Area_boxstyle_hasbg_bottom-B.png?t=1775626615861) 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=1775626615861) center top 0.5vw / contain no-repeat !important;}
  .Area_boxstyle.Area_boxstyle--hasBackdrop:before { background: url(m_Area_boxstyle_hasbg_top-B.png?t=1775626615861) top center / 100% no-repeat, url(m_Area_boxstyle_hasbg_bottom-B.png?t=1775626615861) bottom center / 100% no-repeat, url(m_Area_boxstyle_hasbg_bottom-B.png?t=1775626615861) 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;}
}



/* 併版併版 */
/* 輪播點點調整 */
.swiper-pagination-bullet{opacity: 0.2;border-radius: 20px;width: 6px;height: 6px;transition: opacity 0.3s, background-color 0.3s, width 0.3s;}
.swiper-pagination-bullet-active {width: 20px;height: 6px;display: inline-block;border-radius: 20px;transition: opacity 0.3s, background-color 0.3s, width 0.3s;transition-delay: 0s;opacity: 1;}

/* 公版調整*/
@media screen and (min-width:768px){
  .Area_z{z-index: 100;}
  .acty{padding-bottom: 35pt;}
  .hero-title .PD_layout ul {padding-left: 18px;padding-right: 15px;}
  } 
  @media screen and (max-width: 767px){
  .m96 { width: 98%; margin: 0 auto; }
  .acty{padding-bottom: 1vw;}
  /* .acty__el--4 .acty .Area_boxstyle .swiper-pagination{ bottom: 0vw !important;} */
  .hero-title .PD_layout .PD h4 span {width: 55vw; position: relative;right: 6vw;max-height: 2em;
  font-size: 6.4vw;}
  .acty .Area_boxstyle .swiper-pagination {bottom: -5vw !important;}
  .NavArea{padding-bottom: 2vw;}
  .hero-title .md-text{font-size:6.3vw;}
  } 
  
  /* 間距 */
  @media screen and (min-width:768px){
  .Area_bottom{margin-bottom: 30px;}
  .Area_bottom2{margin-bottom: 60px;} 
  }
  @media screen and (max-width:767px){
  .Area_bottom{margin-bottom: 3vw;} 
  .Area_bottom2{margin-bottom: 3vw;} 
  .m_bottom{margin-bottom: 6vw;}
  .m-top{margin-top: -3vw;}
  }
  
  
  /* 96公版 */
  @media screen and (min-width:768px){
  /* .Area_PD96{width: 96%; margin-bottom: 60px;} */
  }
  @media screen and (max-width:767px){
  .Area_PD96{width: 96%;}
  }
  
  /* 小圖國旗 */
  @media screen and (min-width:768px){
  .iconJp{position: absolute;top: 62px;left: 292px;}
  .iconJp img{width: 89%;}
  .iconJp2{position: absolute;top: 62px;left: 423px;}
  .iconJp2 img{width: 89%;}
  .iconJp3{position: absolute;top: 62px;left: 450px;}
  .iconJp3 img{width: 89%;}
  .Area_boxstyle_title {width: 45%;}

  
  } 
  @media screen and (max-width: 767px){
  .iconJp{position: absolute;top: 6.2vw;left: 25vw;}
  .iconJp img{width: 35%;}
  .iconJp2{position: absolute;top: 6.2vw;left: 25vw;}
  .iconJp2 img{width: 35%;}
  .iconJp3{position: absolute;top: 6.4vw;left: 28vw;}
  .iconJp3 img{width: 35%;}
  } 



/* 三大優惠 */
@media screen and (min-width:768px){
  .bank{margin: 10px auto 0;height: auto;}
  .bank .PD_layout{}
  }
  @media screen and (max-width:767px){
  .bank{position: relative;padding: 1vw 0 0 0;}
  .bank .PD_layout{}
  }


/* 購買流程 */
  @media screen and (min-width:768px){
    .step{margin: 10px auto 0;height: auto;padding-bottom: 30px;}
    .step .PD_layout{}
    }
    @media screen and (max-width:767px){
    .step{position: relative;padding: 1vw 0 5vw 0;}
    .step .PD_layout{}
    }





 /** 倒數公版 **/
.TimerNick2 {z-index:0;display:inline-block;height: 100%;text-align: center;padding-bottom: 2%;}
.TimerNick2 .FontStyle2 {display:inline-block;border:0px;width:60px;font: bold 35px/38px Century Gothic;color:#313131;text-align: center;background: #fcd206;border-radius: 25px;}
.TimerNick2 div:nth-of-type(2),
.TimerNick2 div:nth-of-type(3) { width:60px;}
.TimerNick2 span {padding-left:2px;font: bold 25px/38px  "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;color: #fcd206;}
@media screen and (max-width:767px){
.TimerNick2 {z-index:2;position: relative;left:0%;display:inline-block;margin:0;padding-right:0%;height: 100%;padding-bottom: 2%;overflow:hidden;text-align:center;background-size:100%;}
.TimerNick2 .FontStyle2 {display:inline-block;margin:0px 0 0 0;padding:0;border:0px;width:10vw;font: bold 6vw/8vw Century Gothic;color: #313131;letter-spacing:-1px;text-align:center;background-color: #fcd206;border-radius: 0.5em;}
.TimerNick2 div:nth-of-type(2),
.TimerNick2 div:nth-of-type(3) { width:9vw;}
.TimerNick2 span {padding-left:1vw;font: bold 4vw/8vw  "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;color: #fcd206;}
}   


/* 商品分類 */
@media screen and (min-width:768px){
  .cgpd{margin: 30px auto 0;height: auto;padding-bottom: 50px;}
  .cgpd .PD_layout{ width: 80%;}
  }
  @media screen and (max-width:767px){
  .cgpd{position: relative;padding: 2vw 0 5vw 0;}
  .cgpd .PD_layout{}
  }
  



.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:#ffffff;}
.NavArea_tabbar_page .Nav .swiper-slide-active i { display:block; border: 1px solid #f3af18 !important; background-color: #f3af18 !important;}
/*推編輯按鈕 */  
.NavArea_tabbar_page .Nav input { position: fixed; left: 30%}


/*Phone錨點*/
  .Area_floorPD_NavArea_tabbar {
    margin: -3vw auto 0;
    width: 94%;
    padding-bottom: 3vw;
  }
  .Area_floorPD_NavArea_tabbar.cate-fixed {
    width: 100%;
  }
  .Area_floorPD_NavArea_tabbar .Nav_box {
    border-radius: 8px;
    -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
            box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
  }
  .Area_floorPD_NavArea_tabbar .Nav li {
    overflow: visible;
  }
  .Area_floorPD_NavArea_tabbar.cate-fixed .Nav_box {
    border-radius: 0;
    background-color: rgba(255, 255, 255, 1);
    -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
            box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
  }


  
    /*下方公版-1*/
  @media screen and (min-width:768px){
    .Area_below  {height:100%;}
    .Area_below .below_box {position:relative;}	
        
    /**區標**/	
    .Area_below  .layout_text {width: 75%;margin: -25px auto 15px;background: url(deco_line.png?t=1768975176472)top center no-repeat;background-size: 100%;height: 110px;}
    .Area_below  .layout_text ul {margin:0;padding:0;}
    .Area_below  .layout_text .PD_slide:hover{transform:none;}
    .Area_below  .layout_text .PD a {pointer-events: none!important}
    .Area_below  .layout_text .PD .PD_into h3{font-size: 40px;color: #1932e6;margin-top: 15px;}
        
    }
    @media screen and (max-width:767px){
    .Area_below  {height:100%;}
    .Area_below .below_box {margin-bottom: 2vw;}
      
    /**區標**/	
    .Area_below  .layout_text {width: 100%;background: url(deco_line.png?t=1768975176472)top center no-repeat;background-size: 100%;height: 18vw;}
    .Area_below  .layout_text ul {margin:0;padding:0;}
    .Area_below  .layout_text .PD_slide:hover{transform:none;}
    .Area_below  .layout_text .PD a {pointer-events: none!important}
    .Area_below  .layout_text .PD .PD_into h3{font-size: 1.2em;color: #1932e6;margin-top: 1.7vw;}    
      
    /* .Area_below .PD_box{margin-top: -3vw;} */
      
    }


  
/*下方公版-2*/
  @media screen and (min-width:768px){
    .Area_below2  {height:100%;}
    .Area_below2 .below_box {position:relative;}	
      
    /**區標**/	
    .Area_below2  .layout_text {width: 95%;margin: 0px auto;background: url(deco_line2.png?t=1768975176472)top center no-repeat;background-size: 100%;height: 140px;}
    .Area_below2  .layout_text ul {margin:0;padding:0;}
    .Area_below2  .layout_text .PD_slide:hover{transform:none;}
    .Area_below2  .layout_text .PD a {pointer-events: none!important}
    .Area_below2  .layout_text .PD .PD_into h3{font-size: 43px;color: #000000;margin-top: 26px;}
        
    /**區標**/		
    .Area_below2  .layout_text2 {width: 80%;/* margin: 0px auto 5px; */background: url(deco_line3.png?t=1768975176472)top center no-repeat;background-size: 100%;height: 125px;}
    .Area_below2  .layout_text2 ul {margin:0;padding:0;}
    .Area_below2  .layout_text2 .PD_slide:hover{transform:none;}
    .Area_below2  .layout_text2 .PD a {pointer-events: none!important}
    .Area_below2  .layout_text2 .PD .PD_into h3{font-size: 43px;color: #1932e6;margin-top: 16px;}
      
    }
    @media screen and (max-width:767px){
    .Area_below2  {height:100%;}
    .Area_below20  {margin-top: -10vw;}
      
    /**區標**/	
    .Area_below2 .layout_text {width: 100%;margin-top: 8vw;margin-bottom: -4vw;background: url(deco_line2.png?t=1768975176472)top center no-repeat;background-size: 100%;height: 17.5vw;}
    .Area_below2 .layout_text ul {margin:0;padding:0;}
    .Area_below2 .layout_text .PD_slide:hover{transform:none;}
    .Area_below2 .layout_text .PD a {pointer-events: none!important}
    .Area_below2 .layout_text .PD .PD_into h3{font-size: 1.2em;color: #000000;margin-top: 1.7vw;}
      
   /**區標**/		
    .Area_below2 .layout_text2 {width: 100%;/* margin-top: 7vw; */background: url(deco_line3.png?t=1768975176473)top center no-repeat;background-size: 100%;height: 16vw;}
    .Area_below2 .layout_text2 ul {margin:0;padding:0;}
    .Area_below2 .layout_text2 .PD_slide:hover{transform:none;}
    .Area_below2 .layout_text2 .PD a {pointer-events: none!important}
    .Area_below2 .layout_text2 .PD .PD_into h3{font-size: 1.1em;color: #1932e6;margin-top: 2.0vw;}
    .Pad_bottom{-webkit-padding-before: 8vw !important;}
    }



    /* 品類按鈕  */
    @media screen and (min-width: 768px) {
      .Area_hot {width: 80%;margin: 0 auto;padding: 65px 0 30px 0;}
      .Area_hot .layout_hot3 ul li h3 { position: absolute; top: 0 ; left: 5% ; width: 100% ; color: #222 ; font-size: 31px; text-shadow: -1px -1px 0 #d6ff2c, 1px -1px 0 #d6ff2c, -1px 1px 0 #d6ff2c, 1px 1px 0 #d6ff2c; }
      .Area_hot .layout_hot3 .PD_layout .PD h4 {margin-bottom: .35em;font-size: 35px;color: #fff;position: absolute;top: 19%;left: 20%;font-weight: 600;}
      .Area_hot.layout_hot3 .PD_layout .PD h4 b, .PD_layout .PD h4 span {display: block;max-height: 1.2em;overflow: hidden;}
      .Area_hot.layout_hot3 .PD_layout .PD h4 .js-PD_txt1{font-size: 30px;color: #ffe760; font-weight: bold;}
      .Area_hot .layout_hot3 .PD_layout .PD h4 .js-PD_txt2 {color: #fdfff7;font-weight: 800;font-size: 35px;margin-top: -12px;}
      .Area_hot .layout_hot3 .PD_layout-CSSBG_01 li::after { content: "";display: block;width: 100%;height: 0; padding-bottom: 100% ;background-image: url(brand01.png?t=1768975176473);background-repeat: no-repeat;background-size: 100%; background-position: center top;}  
      .Area_hot .layout_hot3 .PD_layout[data-pd-li*=BN] .PD_into, .PD_layout[data-pd-li*=BN] .PD_img {padding: 0 ; }
      }
          
      @media screen and (max-width:767px){
      .Area_hot {padding: 5vw 0;}
      .Area_hot .layout_hot3 .PD_layout-CSSBG_01{ width: 98% ; }
      .Area_hot .layout_hot3 .PD_layout .PD h3 { color: #222 ; position: absolute ; top: 0 ; left: 3% ; text-shadow: -1px -1px 0 #d6ff2c, 1px -1px 0 #d6ff2c, -1px 1px 0 #d6ff2c, 1px 1px 0 #d6ff2c; }
      .Area_hot .layout_hot3 .PD_layout .PD h4 {margin-bottom: .35em;font-size: 15px;color: #f5f5f5;}
      .Area_hot .layout_hot3 .PD_layout[data-pd-li*=BN] .PD_into, .PD_layout[data-pd-li*=BN] .PD_img {padding:0 0 0 0;}
      .Area_hot .layout_hot3 .PD_layout[data-pd-h4="2"] .PD h4 b, .PD_layout[data-pd-h4="2"] .PD h4 span {display: block;}
      .Area_hot .layout_hot3 .PD_layout .PD h4 .js-PD_txt1 {font-size: 20px;color: #fff;position: absolute;top: 20%;left: 28%;font-weight: 600;}
      .Area_hot .layout_hot3 .PD_layout .PD h4 .js-PD_txt2 {font-size: 20px;position: absolute;top: 46%;left: 1%;font-weight: bolder;width: 100%;overflow: hidden;}
      .Area_hot .layout_hot3 .PD_layout[data-pd-li=BN] ul, .PD_layout[data-pd-li=BN-AWD] ul, .PD_layout[data-pd-li=PDBN] ul {padding: 0 ;grid-gap: .3em;}    
      .Area_hot .layout_hot3 .PD_layout-CSSBG_01 li::after {content: "";display: block;width: 100%;height: 0;padding-bottom: 100% ;background-image: url(brand01.png?t=1768975176473);background-repeat: no-repeat;background-size: 100%;background-position: center top;}
      }