/* 各頁面CSS */


:root {
  --main_color: #2e457c;
  --sec_color: #e69c2e;
  --thir_color: #ff4583;
}

/* 關閉GOTOP */
#gotop { display: none !important; }

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

/*手機置頂選單*/
.NavArea { width: 96%; margin: 3vw auto; }
.NavArea .Nav_box{ border-radius: 7px; } 
.NavArea.cate-fixed { width: 100%; margin: 0; }
.NavArea.cate-fixed .Nav_box{ border-radius: 0; } 


/*隱鑶*/
@media screen and (min-width:1300px){
	.for_newphone { display:none!important;}	
}


/*輪播UI*/
@media screen and (max-width:767px){
	.swiper-pagination-bullet{ width: 4.5px; height: 4.5px; background: #a9a9a9}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 3px;}
  .swiper-pagination{position: relative;}
}

/*區標*/
.bg_top {position: absolute;top:0;}
.txt {padding: 0;margin: 15px auto 15px;top: 22px; width: 60%; z-index: 2;}
.txt ul { padding: 0; grid-gap: 0;}
.txt ul li { background-color: transparent; pointer-events: none;}
.txt ul li .PD_into { padding: 0;}
.txt ul li h5 { padding: 0; margin: 1vw auto 0; font: bold 53px/65px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -1px; text-align: center;}
.txt3 { position: relative;  color: #272727;}
@media screen and (min-width:768px){
  .txt3, .txt4{ left: 30%; }
  .txt3 ul li h5 {  margin:0;}
}
@media screen and (max-width:767px){
  .txt {top:3.5vw; padding: 0; margin: 0 auto;height: 12vw; width: 100%;}
  .txt ul li h5 { font: bold 5.6vw/8.5vw "Century Gothic","Noto Sans TC",sans-serif,"微軟正黑體",system-ui,Helvetica,Arial;}
  .txt3 ul li h5 {  margin:auto; } 
 
}

/*修正公版上下間距*/
.Area_boxstyle .Area_boxstyle_box1 {
  -webkit-padding-before: 140px!important ;
  padding-block-start:140px;-webkit-padding-after: 0px;
  padding-block-end: 0px;-webkit-padding-start: 0px;
  padding-inline-start:0px;-webkit-padding-end: 0px;
}
@media screen and (max-width:767px){
  .Area_boxstyle .Area_boxstyle_box1 {
  -webkit-padding-before: 15vw !important;
  padding-block-start:2vw;-webkit-padding-after: 0vw;
  padding-block-end:  2vw;-webkit-padding-start: 2vw;
  padding-inline-start: 2vw;-webkit-padding-end: 2vw
}  
}  

.Area16 .Area-cate {
  position: relative;
  background-color: #4565B1;
  border-radius: 5vw;
  overflow: hidden;
  padding: 8px 0 12px;
  margin: 0 auto 4vw;
  width: 96%;
}




/*16-各部專區*/
@media screen and (min-width: 768px) {
  .Area16 {
    overflow: hidden;
  }
  .Area16 .Area-cate {
    border-radius: 15px;
    overflow: hidden;
    padding: 8px 0 20px;
    margin: 0 auto 40px;
    width: 100%;
  }
  .Area16 .swiper-pagination {
    bottom: 1vw;
    position: relative;
    margin: 0 0 8px;
  }

  .Area16 .txt2 h5 {
    font: 700 45px / 45px  Arial, Noto Sans TC, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;
    margin: 1.5vw auto 0;
    color: #fee600;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
  }
  .Area16 .txt2 h5 i {
    display: none;
  }
  .Area16 .txt2 h5::before,
  .Area16 .txt2 h5::after {
    content: "";
    display: block;
    width: 1.1em;
    height: 1.1em;
    opacity: 1;
  }
  .Area16 .txt2 h5::after {
    background: url(star02.png?t=1751876789709) no-repeat;
    background-size: cover;
  }
  .Area16 .txt2 h5::before{
    background: url(star01.png?t=1751876789709) no-repeat;
    background-size: cover;
  }
  .Area16 .page_box {
    padding-bottom: 20px;
  }

.Area_AD{
  ul.PD_wrapper{
    padding: 0;
  }
}

.Area16 .Area-cate .Area_swiper{
  background: none;
  padding: 0;
}

.Area16 .Area-cate .Area_swiper .Area_swiper_box{
  padding-left: 16px;
}

.Area16 .Area-cate .Area_swiper .Area_swiper_box ul{
  padding-bottom: 12px;
}
  
}
  



@media screen and (max-width: 767px) {
  .Area16 {
    overflow: hidden;
  }

  .Area16 .txt2 h5 {
    font: 700 1.5em / 1.5em  Arial, Noto Sans TC, "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;
    margin: 1.5vw auto 0;
    color: #fee600;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
  }

  .Area16 .txt2 h5 i {
    display: none;
  }

  .Area16 .txt2 h5::before,
  .Area16 .txt2 h5::after {
    content: "";
    display: block;
    width: 1.1em;
    height: 1.1em;
    opacity: 1;
  }

  .Area16 .txt2 h5::after {
    background: url(star02.png?t=1751876789709) no-repeat;
    background-size: cover;
  }
  .Area16 .txt2 h5::before{
    background: url(star01.png?t=1751876789709) no-repeat;
    background-size: cover;
  }

  .Area_AD{
    width: 96%;
  }

  .Area16 .Area-cate .Area_swiper{
    background: none;
    padding: 0;
  }
  .Area16 .Area-cate .Area_swiper .Area_swiper_box{
    padding-left: 2vw;
  }
}




.Area03{
  .box{
    margin: 0 auto;
    @media screen and (max-width:767px){
      width: 96%;
    }
  }
  .PD_btn{
    span{
      flex-direction: column;
    }
  }
}

/* 精選商品 */
@media screen and (max-width:767px){ 
  .Area03{
    width: 96%;
    margin: 0 auto;
    .PD_layout[data-pd-col-pc="4"] ul.PD_wrapper{
      gap: 3vw 2.5vw;
      padding: 2.5vw 2vw 6vw;
      background: #f0f0f0;
      border-radius: 3vw;

      /* 缺品補圖 */
      &::after{
        content: "";
        display: block;
        position: relative;
        width: 100%;
        background-size: 96%;
      }

      li.PD_slide{
        border: 0;
        background: #fff;
        border-radius: 2vw;
      }
      li.PD_slide .PD_img{
        padding: .5em;
      }
    }
  
  }
}

@media screen and (min-width:768px){
  
  .Area03{
    .PD_layout[data-pd-col-pc="4"] ul.PD_wrapper{
      background: #f0f0f0;
      padding: 12px;
      gap: 12px 8px;
      /* 缺品補圖 */
      &::after{
        content: "";
        display: block;
        position: relative;
        width: 100%;
        background-size: 96%;
      }
      li.PD_slide{
        border: 0;
        background: #fff;
        border-radius: 8px;

        .PD_btn.PD_go{
          /* position: relative; */
          left: 50%;
          transform: translateX(-50%);
          width: 92%;
        }
      }
      li.PD_slide:nth-child(4n+3){
        border-right: 0;
      }

      li.PD_slide:last-child{
        border-right: 0;
      }
    }
  
  }
}

.Area_AD{
  ul.PD_wrapper{
    padding: 0;
  }
  img{
    border-radius: 28px;
    border: 4px solid #fff;
    @media screen and (max-width:767px){
      border-radius: 2vw;
      width: 96%;
      border: .8vw solid #fff;
    }
  }
}


.Area_bottom{
  margin-bottom: 40px;
  @media screen and (max-width:767px){
    margin-bottom: 5vw;
  }
}


/*注意事項區*/
.edm_notice{ text-align:center; padding:20px 10px 100px; color:#fff; font:12px/18px Helvetica;}
@media screen and (min-width:768px){ 
  .edm_notice { 
    padding:40px 10px;
  }
}
.edm_notice .apple_notice{  padding:10px 0px 10px 0px; }