@charset "utf-8";

/*基本*/
body {
  margin: 0;
  padding: 0;
  background: #f4ecd5;
}

/*隱鑶*/
.for_pc {}
.for_phone, .for_m { display:none !important;}
    @media screen and (max-width:767px){
      .for_pc { display:none !important;}
      .for_phone, .for_m { display: inherit !important;}
    }

/*全BOX版面*/
.WRAPPER { position: relative;margin: 0 auto; padding: 0;width:100%; min-width:1220px; overflow: hidden;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;
}
.WRAPPER img { border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;  display:inline-block;}
.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:1220px;}
    @media screen and (max-width:767px){
      .WRAPPER { width: 100%; padding-bottom:0px; margin:0 auto; display: block; min-width:100%; background-repeat:repeat-y; background-size:100% ;}
      .WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;}
    }
ul {margin: 0; padding: 0}
li { list-style: none;}

.danji_box ul li .activityText p {
    color: #272727 !important;
}
.Area_Textwhite .btn_reg .content p {
    color: #272727 !important;
}



/*PC背景*/

  .Area_bg{
    position: absolute;
    top: 950px;
    left: 50%;
    transform: translate(-50%);
      z-index: -100;

  }

/*MB背景*/
  



/*我是CSS_momologo*/
.momologo { position:absolute; top:15px; left:20px; z-index:999; }
    @media screen and (max-width:767px){
      .momologo {position:absolute; width: 25%; top: 2.5vw; left:4vw; }
    }


/*標題*/
.Area_title { position: relative;  bottom: 0px; z-index:2; }
    @media screen and (max-width:767px){
      .Area_title { width: 100% ;}

      .Area_title img { width:20%;}
        /* .Area_title img { width:80%; bottom: 2w;} */
    }


/*版頭*/
.Area_top { position:relative; height: 1400px; }
.Area_top .main { position:absolute; top:300px; left:30%; translate: -50% 0%;  }
.Area_top .toppd { width: 2000px; position:absolute; top: 0px; left: 50%; transform: translateX(-50%); }
.Area_top .logo { filter: brightness(100%); position: absolute; top: 0px; left: 50%; translate: -50% 0%; max-width: 1220px; display: flex; align-items: center; justify-content: center; z-index: 99;}
.Area_top .contral a { margin:15px 10px 0;  }
.Area_top .contral img { width: 125px; height: auto; }
.Area_top .light { position: absolute; top: 0; left: 50%; transform: translateX(-50%);  width: 2000px; height: auto; z-index: 10; mix-blend-mode: screen; }
.Area_act {height: 700px;}

  .pdTabs{
      display:flex;
      gap:10px;
      margin:-90px 0 60px 0px;
    }
    .pdTabs{
  display:flex;
  gap:10px;
}

.pdTabBtn{
  cursor:pointer;
  user-select:none;
}

/* ✅ 預設：暗一點 */
.pdTabBtn img{
  display:block;
  filter: brightness(.55);
  transition: filter .15s ease, transform .15s ease;
}

/* ✅ 被選中：變亮 */
.pdTabBtn.is-active img{
  filter: brightness(1);
  transform: translateY(1px);
}


    .pdSwiper{width:1020px; margin: 0 auto;display: flex;}
@media screen and (max-width:767px){
  .swiper-container{ width: 100vw;}
      .pdTabs{  display:flex;  gap:1vw;  margin:-16vw 1vw 7vw}

  .Area_top { position:relative; height:100vw; width: 100%; }
  .Area_top  .main {position: absolute; top:5vw; left:50%;  translate: -50% 0%; z-index: 1; width: 100%;}
  .Area_top .light { position: absolute; top: 0; left: 50%; transform: translateX(-50%);  width: 100vw; height: auto; z-index: 10; mix-blend-mode: screen; }
  .Area_top  .toppd { position: absolute; top:0vw; left: 50%; transform: translateX(-50%); width: 100vw; z-index: 1 ; }
  .Area_top  .toppd img {max-width: 100%; height: auto;}
  .Area_top  .logo {position: absolute; top:2vw; left:50vw; width:100%; z-index: 1}
  .Area_top .contral {position: absolute; z-index: 99;padding:0vw 0;}
  .Area_top .contral a {margin: 1vw;}
  .Area_top .contral img{width: 12.5vw;}
  .Area_act {height: 56vw;}
  .sw { width: 95vw;margin-left: 2.5vw;}
  .sw0 { width: 100vw;}
 }

.Area01 { height:700px}
@media screen and (max-width:767px){
  .Area_top { position:relative; width:100%; height:100vw; }
  .pc_Area02_bg{pointer-events: none;position: relative;width:90vw;left: 5vw;}
  .Area_title_01{ position: relative; height: 18vw; display: flex; justify-content: center;width: 90vw;}
  .Area_title_02{ position: relative; height: 17vw; display: flex; justify-content: center;width: 90vw;}
  .Area01{ height:250vw;}
 }
@media screen and (min-width:767px){
  .Area01{ height:1000px}
   .Area01 .Promote_bg{height: 26vw;}
}





/*Area_02夏日熱搜*/
.Area02 { position:relative; height:590px; }
.Area02 .layout_bg img { max-width: 100%;  }
.Area02 .layout_bg { scale: 0.9; }
@media screen and (min-width: 768px) { 
  
.Area02 .PD_layout { position: absolute; top:90px;}
.Area02 .PD_layout ul { width: 80%; }
 }
 @media screen and (max-width:767px){
  .Area02 .layout_bg { scale:  3.5; transform-origin: top}
 .Area02 { position:relative; height:160vw;}
 .Area02 .PD_layout { position: absolute; top: 7vw; left:0vw ;}	 
 }


/*03-登記*/
.Area03 { position: relative; height:879px; }
.Area03 .layout_bg { position: absolute; top:0; left:-390px; z-index:-1;  pointer-events: none; }
@media screen and (max-width:767px){
  .Area03 { position: relative; width: 100%; height:100vw;  padding-bottom:0%; }
  .Area03 .title {padding-top:0;width: 81%; left: 10vw;  }	
  .Area_danji { width:96%;  }
  .Area03 .Area_danji.first {  position: absolute; top:23vw; left:2%;}	 
  .Area03 .Area_danji.second {  position: absolute; top:60vw; left:2%;}	 
}




 .clickable-button {
  transition: transform 0.2s, filter 0.2s;
}

.clickable-button.clicked {
  transform: scale(0.9);
  filter: brightness(0.7);
}

/* 新品區 */
/* 當螢幕大於 768px 時 */
@media (min-width: 768px) {
  .js-new-arrival-only .PD_wrapper {
    display: flex;
    flex-wrap: wrap; /* 讓它會自動折行 */
    transform: none !important; /* 強制關閉 Swiper 的位移 */
    width: 100% !important;
  }

  .js-new-arrival-only .PD_slide {
    width: 33.33% !important; /* 三格一排 */
    margin-bottom: 20px; /* 上下間距 */
  }
  
  /* 隱藏電腦版不需要的圓點 */
  .js-new-arrival-only .swiper-pagination {
    display: none;
  }
}
.Area_new {position: relative; height:1200px;}
.Area_new .contral {height:170px;margin: 0px 0 0 ; position: relative; display: flex; }
.Area_new .contral li{margin:0px ;}
.Area_new .contral img{width:100%;}
.Area_new .PD_layout .PD_wrapper .go_bt:hover{
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);
}

.pdPanel .PD_layout ul{ margin: 0 auto }
.pdPanel .PD_layout li{ margin: 0 10px; }
 @media screen and (max-width:767px){
.Area_new { position: relative; width: 100%; height:110vw;  }
.Area_new .contral {height:45vw; display: flex;    margin-top: -16vw;}
.Area_new .contral li{width: 30vw; margin: 1.5vw 5.5vw 0 -3vw;}
.Area_new .contral img{width:130%;}
.Area_new .PD_layout .PD_wrapper .go_bt:hover{
    -webkit-transform:none;
     -moz-transform:none;
      -ms-transform:none;
       -o-transform:none;
          transform:none;
}
 }


.Area05 .contral {height:170px;margin: -20px 0 70px ; position: relative; display: flex; }
.Area05 .contral li{margin:10px ;}
.Area05 .contral img{width:180px;}

 @media screen and (max-width:767px){
.Area05 .contral {height:35vw; display: flex; flex-direction:row; flex-wrap:wrap;  padding:0px 2vw 6vw 3vw;}
.Area05 .contral li{width: 27vw; margin: 2vw;}
.Area05 .contral img{width:90%;}
 }


/*06下方公版*/
.Area06 { position: relative; height:900px; }
@media screen and (min-width: 768px) { 
.Area06 .PD_layout { position: absolute; top:125px; left:0px;}
.Area06 .PD_layout ul { width: 80%; }


 }
 @media screen and (max-width:767px){
.Area06 { position: relative; width: 100%; height:300vw; padding-bottom: 10vw;  }
.Area06 .PD_layout { position: absolute; top:15vw; left:0px;}
 }

 .Area_title { position: relative; margin-bottom: 30px; margin-top: 60px;}
 .Area_title01 { position: relative; margin-bottom: 0px; }
 .Area_title img { margin: 0 auto; }

@media screen and (max-width:767px){
  .Area_title {margin-bottom: 2vw;margin-top: 4vw; }
  .Area_title img { margin: 0 auto; width: 90%; }  
}



.swiper-pagination-bullet { margin: 0 3px;}

@media screen and (min-width: 768px) {
.Area_PD .swiper-container { padding-bottom: 5vw;}
.Area_PD .sw1 .swiper-pagination  {width: 960px; left: 50%; transform: translateX(-50%); top: 529px;}
.Area_PD .sw2 .swiper-pagination  {width: 960px; left: 50%; transform: translateX(-50%); top:386px;}
.Area_PD .sw3 .swiper-pagination  {width: 960px; left: 50%; transform: translateX(-50%); top:571px;}
.Area_PD .sw4 .swiper-pagination  {width: 960px; left: 50%; transform: translateX(-50%); top:571px;}
.Area08 .one .swiper-pagination  {width: 1000px;  left: 50%; transform: translateX(-50%); top:419px;}
.sale .swiper-pagination  {width: 1000px;  left: 50%; transform: translateX(-50%); top:419px;}
.two .swiper-pagination  {width: 1000px;  left: 50%; transform: translateX(-50%); top:419px;}
.three .swiper-pagination  {width: 1000px;  left: 50%; transform: translateX(-50%); top:419px;}
 }
 @media screen and (max-width:767px){
.Area_PD .sw1 .swiper-pagination  {width: 100%; left: 50%; transform: translateX(-50%); top:54vw;}
.Area_PD .sw2 .swiper-pagination  {width:100%; left: 50%; transform: translateX(-50%); top:40vw;}
.Area_PD .sw3 .swiper-pagination  {width:100%; left: 50%; transform: translateX(-50%); top:46vw;}
.Area_PD .sw4 .swiper-pagination  {width:100%; left: 50%; transform: translateX(-50%); top:46vw;}
.Area08 .one .swiper-pagination  {width: 100vw;left: 50%; transform: translateX(-50%); top:59vw;}
.sale .swiper-pagination  {width: 100vw;left: 50%; transform: translateX(-50%); top:57vw;}
.two .swiper-pagination  {width: 100vw;left: 50%; transform: translateX(-50%); top:57vw;}
.three .swiper-pagination  {width: 100vw;left: 50%; transform: translateX(-50%); top:57vw;}
 
 }



/**延遲載圖用**/
.mainArea .articleList * img.lazy {display:none;} 



/* shyu */


/*01-攻略*/
.Area_promote { position:relative;  margin-bottom: 150px;  z-index:1;}
.Area_promote .promote_wrap { display: flex; flex-direction: column; gap: 0px; }
.Area_promote img { max-width: 120%; margin: 0 -50% -30px;}


@media screen and (max-width:767px){
  .Area_promote { position:relative; height:100%; width: 100%; margin: 0 auto 12vw; top: 5vw; }
  .Area_promote img { max-width: 94%; margin: 0 0 -3vw;}
  .Area_promote .promote_wrap { display: flex; flex-direction: column; margin: 4vw -9vw 0vw; }
}


/*02-登記*/
.danji { 
  margin: 0 auto 80px;
}
.danji .text { 
  margin: 0 0 50px 0;
}

@media screen and (max-width:767px){
  .danji { 
    margin: 0 auto 5w;
  }

  .danji .text { 
    margin: 0 0 3vw 0;
  } 
}


/*03-主打商品*/
.Area_TopPD {
  margin-bottom: 80px;
}

.Area_TopPD .toppd_item:not(:last-child) {
  margin-bottom: 20px;
}

/* 錨點 */
.Area_anchor {
  margin-bottom: 80px;
}

.Area_anchor .anchor_wrap {
  display: flex;  
  width: 100%;  
}

.Area_anchor .anchor_item {
  display:flex;
  justify-content: center;  
}
.Area_anchor .anchor_item img {
  max-width: 170%;
  height: auto;
}



/* 04-4品公版 */
.Area_hot {
  padding: 85px 0 70px;
}

.Area_hot .layout_bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);  
  z-index: -1;
  pointer-events: none;
}


.Area_hot .PD_layout .PD_slide {  
  border-radius: 0px;
  background-color: white;
}

.Area_hot .PD_layout[data-pd-h3="5"] .PD h3 span {  
  color: #676053;
  background-color: #edd9c0;
}

.Area_hot .PD_layout .PD_into {
  padding: 1rem;
}

@media screen and (max-width:767px){
  .Area_hot {
    padding: 10vw 0 0vw;
    margin-bottom: 0vw;
  }

  .Area_hot .layout_bg {
    position: absolute;
    top: 0vw;
    left: 50%;
    transform: translateX(-50%);  
    z-index: -1;
    pointer-events: none;
    width: 100%;
  }

  .Area_hot .Area_swiper {
    width: 100%;
  }


  .Area_hot .PD_wrapper {
    width: 100%;
  }

  .Area_hot .PD_slide {
    flex-grow: 1;
  }

  /* 錨點 */
  .Area_anchor {
    margin-bottom: 5vw;
  }
  .Area_anchor .anchor_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 70%;
    margin: 0 auto;
    gap: 0px;  
  }
  .Area_anchor .anchor_item img {
    width: 170%;
    height: auto;
  }

}


.title_000{height: 200px;}
.Area04 { position: relative; margin-bottom: 80px; }

.swiper-pagination-bullet {
  background: transparent;
  border: 1px solid #cdaf81;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #cdaf81;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled, .swiper-button-next, .swiper-button-prev {
  color: #cdaf81;
}
.nav-prev-1 ,.nav-next-1{
  top: 60%;
}


@media screen and (max-width:767px){
  .title_000{height: 12vw;}
  .Area04 { position: relative; width: 100%; margin-bottom:7vw;}
  /* .Area04_swiper { position: relative; width: 100%; padding-bottom:19vw;} */


 }

.Area_danji_wrap {
  margin-bottom: 10px;
}

 .Area_danji_wrap .layout_bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);  
  z-index: -1;
  pointer-events: none;
  /* width: 100%; */
  /* height: 100%; */
 }

 @media screen and (max-width:767px){

  .Area_danji_wrap {
    margin-top: 2vw;
    margin-bottom: 5vw;
  }

  .Area_danji_wrap .layout_bg {
    position: absolute;
    top: -5vw;
    left: 50%;
    transform: translateX(-50%);  
    z-index: -1;
    pointer-events: none;
    width: 150%;
    height: auto;
   }
 }

 
/* logo */
.Area_logo {  
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 auto 80px;  
}

.Area_logo .logo_wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  flex: 1
}

@media screen and (max-width:767px){
  .Area_logo {  
    display: flex;
    align-items: center;    
    margin: 5vw auto 10vw;
    place-items: center; 
    width: 95%;   
    gap: 3vw;
  }

  .Area_logo .logo_title {
    width: 30%;
  }

  .Area_logo .logo_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1vw;
    flex: 1
  }

  .Area_logo img {
    width: 100%;
    height: auto;
  }
}

.Area_Promote {
  margin-bottom: 150px;
  margin-top: 50px;
}

.Area_Promote .PD_wrapper{
   background-color: #fff;
   padding: 20px;
}

.Area_Promote .PD_wrapper .PD_slide{   
   padding:  0.5rem 1rem;
}

.Area_Promote .PD_wrapper .PD_slide .money,
.Area_Promote .PD_wrapper .PD_slide .Price {
   color: #d8343f;
}

.Area_Promote .PD_wrapper .PD_slide .PD_img{
   margin-bottom: 1rem;
}

.Area_Promote .PD_layout  { width: 70%}
.Area_Promote .PD_layout .PD_into {
  padding: 0 1rem 1rem
}

.Area_Promote .PD_layout[data-pd-h3="5"] .PD h3 span { color: #676053; background-color: #edd9c0; }

.Area_Promote .Promote_bg {
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);  
  height: 100%;
  z-index: -1;
  pointer-events: none;
  width: 100%;
}

.Area_Promote .Promote_bg img {
  width: 100%;  
  object-fit: cover;
}

@media screen and (max-width:767px){
  .Area_Promote {
    margin: 0rem auto 1rem;
    height: 80vw;
    
  }

  .Area_Promote .PD_wrapper .PD_slide{   
   padding:  0rem 0.2rem;
}

  .Area_Promote .Promote_bg {
    position: absolute;
    top: -12.5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    z-index: -1;
    pointer-events: none;
    
  }

  .Area_Promote .Promote_bg img {
    width: 100%;  
    height: auto;
    object-fit: fill;
  }

  .Area_Promote .PD_layout {
    width: 100%;
  }
}


/* Area_hotPD */
.Area_hotPD {
  padding: 60px 0 10px;
  margin-bottom: 20px;
}

.Area_hotPD .layout_bg {
  width: 100%;  
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.Area_hotPD .layout_bg img {
  width: 100%;  
  grid-column: 1/-1;
  grid-row: 1/-1;  
}

.Area_hotPD .Area_swiper {
  width: 120%;
  padding-bottom: 40px;
  margin: 0 -94px 0;
}

.Area_hotPD .swiper-pagination {
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.Area_hotPD .PD_layout .PD_slide {
  background : white;
  border-radius: 0px;
}

@media screen and (max-width:767px){
  .Area_hotPD {
    padding: 10vw 0 10px;
    margin-bottom: 0vw;
  }

  .Area_hotPD .layout_bg {
    width: 114%;    
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .Area_hotPD .Area_swiper {
    width: 100%;
    padding-bottom: 5vw;
    margin: 0;
  }

}


/* Area_hotPD */


@media screen and (max-width:767px){
  .Area_hotPD .layout_bg {
    width: 114%;    
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
}


.Area_danji .danji_box ul li .activityImg img {
  object-fit: contain;
}

@media screen and (max-width:767px){
  .Area_danji .danji_box ul li .activityText .gifts {
    font-size: 1rem;    
  }
}


.count-clock {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.count-clock .countdown_bg {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: -1;
  height: auto
}

@media screen and (max-width:767px){
  .count-clock .countdown_bg {
    position: absolute;
    top: -10vw;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    z-index: -1;
    height: auto
  }
}

.count-clock .time_wrap {
  /* position: absolute; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 70px
}

.count-clock .time {
  color: white;
  font-size: 2.5rem;
  font-weight: bolder;
  padding: 20px 43px; 
}

@media screen and (max-width:767px){
  .count-clock {
    gap: 10px;
  }

  .count-clock .time_wrap {  
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10vw;
  }

  .count-clock .text {
    font-size: 1.25rem;
  }
  .count-clock .time {
    font-size: 5vw;
    padding: 0vw 7vw 5vw; 
  }
}


.Area04_01_bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;

  img {
    width: 100%;    
    object-fit: cover;
  }
}

.reverse_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
}

@media screen and (max-width:767px){
  .reverse_wrap {
    flex-direction: column-reverse;        
  }
}