@charset "utf-8";
/* CSS Document */

/*基本*/
body{ margin:0; padding:0; background-color: #c7afff;}

/*PC縮小*/
@media screen and (min-width: 768px) {
  body{background-color:#c7afff;}
	
}


/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; overflow: hidden; width:100%; min-width: 1220px; max-width: 2000px;text-align:left; font-family:"Century Gothic","微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
/*預設清單樣式*/
.Area .list_00 ul { display:inline-block; margin:0; padding:0;}
.Area .list_00 li { list-style:none; float:left; overflow: hidden;}
	@media screen and (max-width:767px){
		.WRAPPER { min-width: inherit; min-height:100vh;}
		.WRAPPER img { width:100%;  height: auto;}
	}


/*背景*/
.bgdeco { z-index: 0; position: absolute; top: 630px; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bgdeco.png?t=1775093838694) repeat-y center top; transition: 0.5s linear; pointer-events: none;}
.bgtop { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; min-width: 1220px; height: 100%; background: url(bg01.jpg?t=1775093838694) no-repeat center top;}

.bggold {background-image: linear-gradient(to right, #0a1941, #0a1941, #0a1941);padding: 10px 10px 35px 0;box-sizing: border-box;margin-top: 30px;margin-bottom: 80px;border-radius:15px !important;}
  @media screen and (max-width:767px){
   .m_bgtop { z-index: 0; position: absolute; top: 10vw; left: 0; width: 100%;  height: 100%; background: url(m_bg01.jpg?t=1775093838694) no-repeat center top;background-position: center top;background-repeat: no-repeat; pointer-events: none; background-size: 100%; }	
   .bgblack {background: #0a1941;border: solid 1px;border-image: linear-gradient(to right, #0a1941, #0a1941) 1;padding: 5vw 0 2vw;width: 98%;margin: -5vw auto 0;border-radius:0vw ;}
   .bggold {border: solid 0px;padding: 2vw 0.3em 5vw;width: 98%;margin: -1vw auto 0;border-radius:2vw !important;margin-bottom:9vw ;}
  }


  @keyframes zoom {
    from { transform: scale3d(1.2, 1.2, 1.2);}
    100% { transform: scale3d(1, 1, 1);}
  }
  @keyframes downIn {
    from { transform: translateY(10px);}
    100% { transform: translateY(0);}
  }
  


/*區塊背景-共用設定*/
.Area_bg { pointer-events: none; z-index: -1;}
.Area_bg div { pointer-events: none; z-index: 1; position: absolute; left: 0; width: 100%; background-position: center top; background-repeat: no-repeat;}
    @media screen and (max-width: 767px) {
      .Area_bg div { pointer-events: none; z-index: -1; position: absolute; left: 0; width: 100%; background-position: center top; background-repeat: no-repeat;}
      .Area_bg div { z-index: 1; top: 0vw; padding-bottom: 200%; background-size: 100%;}
    }
    /*圖片*/
    /*.Area_share_bg { z-index: 2;}*/
      @media screen and (min-width: 768px) {
        .Area_activ_bg div { top: -133px; height: 1000px; position: absolute;}
      }
      @media screen and (max-width: 767px) {
        .Area_activ_bg div { top: -17.5vw; height: 0; padding-bottom: 110%; background-size: 100%;}
      }



.Area_bottom{ margin-bottom: 70px !important; }
@media screen and (max-width:767px){
	.Area_bottom{ margin-bottom: 7vw !important; }
}


/*版頭*/
.Area_top .momologo { z-index:8; position: absolute; top: 0px; left:10px;}
.Area_top .momologo a { display:block; width:172px; height:100px; background: url(momo_logo.png?t=1775093838694) no-repeat;}
.Area_top .momologo a:hover{ background: url(momo_logo_on.png?t=1775093838694) no-repeat;}
	@media screen and (max-width:767px){
		.Area_top { height: auto;}
		.Area_top .m_momologo { width:21%; position:absolute; z-index:5; top:2vw; left:2vw;}
    /*提醒我按鈕*/
    a.mo_remind_btn { z-index:12; position: absolute !important; right: 0; bottom: -10.5vw; width: 16%;}    
	}




/*版頭品*/
@media screen and (min-width:768px){
  .Area_title {position: relative;}
  .Area_title .topPD { z-index:99; position: absolute; top:270px; right:30px;width:960px;  }
  .Area_title .topPD ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: inherit;}
  .Area_title .topPD ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
  .Area_title .topPD ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}	
  .Area_title .topPD .PD_layout .PD_img { width:90%;}
}
@media screen and (max-width:767px){
  .Area_title {position: relative;display: block !important;}
  .Area_title .topPD { z-index:99; position: absolute; top: 25vw; right:-20vw; width:150%;height:40vw;}
  .Area_title .topPD .PD_layout .PD_logo{ border: none; position: relative; top: 2vw; left: 38vw; width: 60% !important;}
  .Area_title .topPD .PD_layout ul { gap: 4vw; padding: 0;}
  .Area_title .topPD ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 80%; box-sizing: content-box; grid-gap: inherit;}
  .Area_title .topPD ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
  .Area_title .topPD ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}	
  /* .topPD .PD_layout[data-pd-li*=BN-AWD] .PD_img { display: block !important;} */
}



@media screen and (min-width:768px){
.Area_title{ height:700px; box-sizing: border-box;margin:0 auto ;width:1220px ;}

    /*日期*/
    .Area_title .box_txt2 { z-index: 10;position: absolute;top: 25px; left: 742px;width:100%;}
    .Area_title .box_txt2 .PD_layout h3{ color: #ffffff!important; font-size:43px;  font-family: "Century Gothic","Noto Sans TC"; font-weight: 700;}


    /*副標輪播*/
    .Area_title .Area_topSUB {position: absolute;top:185px;left:175px;width:548px;}
    .Area_title .Area_topSUB ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: inherit;}
    .Area_title .Area_topSUB ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
    .Area_title .Area_topSUB ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}	


}


@media screen and (max-width:767px){
.Area_title {z-index:9 ; height:70vw;}

    /*日期*/
    .Area_title .box_txt2 { z-index: 10;position: absolute;top: 1vw; left: 63.5vw;width:100%;}
    .Area_title .box_txt2 .PD_layout h3{ color: #ffffff!important; font-size:20px;  font-family: "Century Gothic","Noto Sans TC"; font-weight: 700;} 



    /*副標輪播*/
    .Area_title .Area_topSUB {position: absolute;top: 20vw;right: 38vw;width:65%;}
    .Area_title .Area_topSUB img { width:82% !important;}
    .Area_title .Area_topSUB ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 80%; box-sizing: content-box; grid-gap: inherit;}
    .Area_title .Area_topSUB ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; opacity: 0; transform: translate(5%,0);}
    .Area_title .Area_topSUB ul.PD_wrapper li.swiper-slide-active { opacity: 1; transition: .8s ease-out; transform: translate(0,0);}	
    .Area_title .PD_wrapper {background-color: rgba(255,255,255,0.00);}
    .Area_title .PD_layout[data-pd-li*="BN"] li{border: rgba(255,255,255,0.00);}	

}




/*活動倒數*/
.TimerNick {position: absolute;top: 305px;left:195px;display: inline-block;z-index:8;text-align: center;letter-spacing: 0.1em;font-family: Arial, Helvetica, sans-serif;color: #fff;font-size: 30px;}
.TimerNick .FontStyle {display: inline-block;margin: 0 0 0 -2px;padding: 0;border: 0;font-size: 39px;color: #fff;font-weight: normal;letter-spacing:0px;text-align: left;font-weight:600 ;}
.TimerNick span {padding-left: 5px;font-size: 28px;letter-spacing: 0.1em;color: #fff;}
.TimerNick b { font-weight: normal;}
@media screen and (max-width:767px){
  .TimerNick  {width:100%;top: 32vw;left:6.2vw;display: flex;column-gap: 0.1em;text-align: left;font-size:1.0em;}
  .TimerNick .FontStyle {margin: -0.15em 0 0 0em;padding: 0;border: 0;font-size: 1.3em;letter-spacing:- 0.09em;}
  .TimerNick span {padding-left: 0;font-size: 1.2em;letter-spacing: -0.07em;margin-left:-0.2em;margin-right: 0.0em;}
  .TimerNick span:first-child{ margin-top: -0.1em; }
}  

/*去除PD_layout樣式*/
.PD_noBG ul { background-color: transparent; width: 100%; padding: 0;}
.PD_noBG ul li { border: none; /*background-color: #fff;*/}





/*區標(線上入稿)*/
@media screen and (min-width:767px){
  .box_txt2 {position: relative;top:0;background-image:url("m_box_txt_bg.png?t=1775093838694"); background-size: 100%;width: 960px; height:160px;overflow: hidden;background-repeat:no-repeat;margin: 0px auto;}
  .box_txt2 .PD_layout ul {padding: 0;margin-top:58px;list-style: none;height:100%!important;}
  .box_txt2 .PD_layout ul li { background-color: transparent; pointer-events: none;}
  .box_txt2 .PD_layout ul li h3 {position: relative;z-index: 1;font:48px/48px Arial, "Noto Sans TC", "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;float: center;color:transparent;background: linear-gradient(180deg, #FFF, #FFF 70%, #ffF) /* 設定漸層背景 */;
    -webkit-background-clip: text; background-clip: text/*讓背景只顯示在文字上 */;width: 100%;margin: 0 auto;padding: 0;font-weight: 600;font-style:normal;}	
  .box_txt2 .PD_layout .PD_into {padding: 0!important;}	
  }
  @media screen and (max-width:767px){
  .box_txt2 {position: relative;width: 103%;height:20vw;margin-bottom: 2vw;background-image:url(m_box_txt_bg.png?t=1775093838694);background-repeat: no-repeat; background-size: 100%;z-index: 20;overflow: hidden;}	
  .box_txt2 .PD_layout ul {margin-top:3vw;list-style: none;}
  .box_txt2 .PD_layout ul li { background-color: transparent; pointer-events: none;}
  .box_txt2 .PD_layout ul li h3 {position: relative;top:1.5vw;margin: 0;padding: 0;width: 100%;height: 8vw;font:6vw/6vw  Arial, "Noto Sans TC", "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;text-align: center;color:#fff;letter-spacing: 0;overflow: hidden;font-weight:600;/*text-shadow: 0px 0px 5px #000;*/font-style:normal;}
  }




/*攻略區塊*/
.Area_activ .box_tab2{ margin-top: 2%; }
.warningTxt { position: relative; }
  @media screen and (min-width:768px){
    .Area_activ .activ01{ margin: 0px 0 0px -10px; }
    .Area_activ .activ01 img{ width:960px !important }
  }
  @media screen and (max-width:767px){
    .Area_activ{
      width: 100%;
          overflow: hidden; /* 將縮放多出的區域截掉 */
          display: flex;
          justify-content: center; /* ★置中關鍵 */
          height:100vw ;
      }
    .Area_activ .activ01{ margin: -6vw 0 0vw -1vw }
    .Area_activ .activ01 img{ width:103% !important }
  }

  .big-bg {
    box-sizing: border-box !important;
    width: 960px;
    height: 1000px;
    margin: auto;

    background: url('activ_01.png?t=1775093838694') no-repeat center top;
    background-size: 960px 1025px;

    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "top top top"
        "b1  b2  b2"
        "b3  b4  b5";
    gap: 0px;
    grid-template-columns: calc((960px - 20px) / 3) calc((960px - 20px) / 3) calc((960px - 20px) / 3);
}


/* --- 新增最上方橫條 --- */
.top-banner {
  grid-area: top;
  background:transparent;
  text-align: left;
  height:430px ;

}

.b1 { grid-area: b1; }
.b2 { grid-area: b2; }
.b3 { grid-area: b3; }
.b4 { grid-area: b4; }
.b5 { grid-area: b5; }

.b1 {
  grid-area: b1;
  width: 450px;   
  height: 250px;   
  margin-left:30px !important ;
}

.b2 {
  grid-area: b2;
  width: 450px;   
  height: 250px;   
  margin-left:165px !important ;
}

.b3 {
  grid-area: b3;
  width: 300px;   
  height: 270px;   
  margin-left:30px !important ;
  margin-top:0px ;
}

.b4 {
  grid-area: b4;
  width: 300px;   
  height: 270px;   

}

.b5 {
  grid-area: b5;
  width: 300px;   
  height: 270px;   
}


.btn {
    display: block;
    text-align: center;
    text-decoration: none;
    background: rgba(0, 0, 0, 0);
    border-radius: 6px;
}



.btn:hover {
  filter: brightness(1.4);
  box-shadow: 0 0 20px rgba(160, 80, 255, 0.8);
}






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

/* === 內層的整個 layout 等比縮小 === */
.big-bg {
  width: 960px;                  /* ★PC 原始寬 */
  height: 265vw;
  
  background: url('activ_01.png?t=1775093838694') no-repeat center top;
  background-size: 960px 1025px; /* ★PC 原始背景尺寸 */
  
  transform: scale(0.40);        /* ★手機縮放比例，依你要的大小調整 */
  transform-origin: top center;  /* 置中等比縮放 */
}

/* b1~b5 保持原寬高（不需修改），由 scale() 自動縮 */

}


/*主打品*/
.Area03 .PD_layout{width: 95%;}
.Area03 .PD_layout.layout_item .PD_slide .PD p del { color:#FFF;font-size: 0.3em;font-weight:400 ;}
.Area03 .PD_layout.layout_item .PD_slide .PD p {padding: 0% 0;height: 1.0em;line-height: 0.4em;font-size:5.5em;}
.Area03 .PD_layout.layout_item .PD p .money {color: #e7b752;font-weight: 500; font-size: .4em;}
.Area03 .PD_layout.layout_item .PD p .Price {color: #e7b752;font-weight: bolder; font-size: 0.7em; text-align: left;}
.Area03 .PD_layout.layout_item .PD_slide .PD_into {padding-left:0;position: relative; text-align:center;font-size: 0.8em;padding-bottom: .0em;}
.Area03 .PD_layout.layout_item .PD_slide .PD_into h3 {padding: 0;max-height: 1.3em;font-size: 3.3em;line-height: 1.3em;font-family: "Noto Sans CJK SC";color:#FFF;font-weight:600 ;}
.Area03 .PD_layout.layout_item .PD_slide .PD_into h4 {font-size: 2.5em;color: #FFF; line-height: 1.3em;font-weight:400 }
.Area03 .PD_layout.layout_item .PD_slide .PD_img img { width: 100%; margin: 0; box-shadow: unset;}
.Area03 .PD_layout.layout_item .PD_slide .PD .PD_logo { display: none;}

@media screen and (max-width:767px){
	.Area03{ }    
  .Area03 .PD_layout.layout_item li{background: url("layout_itembg.png?t=1775093838694") center top / 90% no-repeat scroll;}	
	.Area03 .box_all{ width: 96%; margin:-5vw auto 0 auto;}
	.Area03 .PD_layout.layout_item ul { grid-gap: 0 1.5%;}
	.Area03 .PD_layout.layout_item ul li {width: 100%; height: 72vw;}
	.Area03 .PD_layout.layout_item .PD_slide .PD_into {font-size: 0.9em; top:0vw; width: 100%;}
  .Area03 .PD_layout.layout_item .PD_slide .PD p del { color:#FFF;font-size: 0.55em;font-weight:400 ;}
	.Area03 .PD_layout.layout_item .PD_slide .PD_into h3 { font-size: 1.4em; line-height: 1.7em;  }
	.Area03 .PD_layout.layout_item .PD_slide .PD_into h4 { font-size: 1.2em; line-height: 1.7em;  letter-spacing: -1px; margin-bottom: 0;;}
	.Area03 .PD_layout.layout_item .PD_slide .PD p{ height: 2em; line-height: 8vw; font-size: 1.8em;  }    
	.Area03 .PD_layout.layout_item .PD p .money { font-size: .4em;}
	.Area03 .PD_layout.layout_item .PD p .Price { font-size: 1.3em; }
	.Area03 .PD_layout.layout_item .PD_slide .PD_img img { margin:-7% 0 0 0%;}


}


/*區塊4*/
@media screen and (min-width: 768px){
  .Area04 {}
  .Area04 .PD ul {margin: 0 3%;border-radius: 1em;}

}
@media screen and (max-width: 767px){
  .Area04 {margin-bottom: 7vw !important;margin: 0 auto;}
  .Area04  .PD_layout {width: 96%;}
  .Area04 .PD ul{margin: 2% 3%;border-radius: 0.55em;}

}

/*BN*/
@media screen and (min-width: 768px){
.Area_Abn2 {height:312px;}	
.Area_Abn2 .box05 .PD_layout .PD img,.Area_Abn .box06 .PD_layout .PD img { border-radius: 1em; }
	
}
@media screen and (max-width: 767px){
.Area_Abn2 {height:33vw; }	
.Area_Abn2 .box{ }
.Area_Abn2 .box05 { margin-bottom: 2vw;   width: 100%; margin: 0 auto; }
.Area_Abn2 .box05 .PD_layout .PD img,.Area_Abn .box06 .PD_layout .PD img { border-radius: 0.5em; }
}


/*商品公版*/

@media screen and (min-width:768px){
	.Area05{ margin-top: 70px;  padding-bottom: 53px;  margin-bottom: 20px; }

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

	
}









/*品牌旗艦館*/

.Area_flags {background: url(Area_flags_bg.png?t=1775093838694) no-repeat top center;background-size:95% ;}

.Area_flags .PD_layout {
  width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
}



/* 防止外部樣式影響li寬度（像 slider 可能寫死 width） */
.Area_flags .PD_layout .PD_wrapper > .PD_slide {
  width: auto !important;
}

.Area_flags .PD_layout .PD_wrapper > .PD_slide .PD_img img {
  width: 90%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .Area_flags { width: 100%; }
  .Area_flags .PD_layout { width: 96%; }
}




/*黏人精*/
.Area_hammerAD { z-index: 9999; position: fixed; bottom: 0; right: 0;}
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 100%; height: auto; position: absolute; top: 0; left: 0;}
.Area_hammerAD .closeButton a { display: block; cursor: pointer; position: absolute; width: 20px; height: 20px; border-radius: 50%; font: bold 20px/1em "Century Gothic"; color: #FFF; text-align: center; background-color: rgba(0%,0%,0%,0.5); text-decoration: none; z-index: 2;}
.Area_hammerAD .Ahammer_text { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 90%; color: #000; font-family: "Century Gothic","Noto Sans CJK TC"; font-weight: 700;}
.Area_hammerAD .Ahammer_black .img_0, .Area_hammerAD .img_1 { filter: brightness(0%);}
.Area_hammerAD .Ahammer_black .img_1 { filter: none;}
.Area_hammerAD .Ahammer_black .Ahammer_text { color: #fff;}
@media screen and (min-width:768px){
  .Area_hammerAD { position: fixed; z-index: 300; left: 50%; right: auto; bottom: 50px; display: block; width: 210px; height: 200px; transform: translateX(618px) translate3d(0,200px,0);}
  .Area_hammerAD .closeButton a { top: 0; right: 0;}
  .Area_hammerAD .Ahammer_text { font-size: 2.3em; line-height: 1em; height: 1em; top: 40px;}
}
@media screen and (max-width:767px){
  .Area_hammerAD { display: block; width: 26%; transform: translate3d(0px, -215px, 0px) !important;}
  .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
  .Area_hammerAD .Ahammer_text { font-size: 1.5em; line-height: 1.5em; height: 1.5em; top: 3.6vw;}
}