@charset "utf-8";
/*基本*/
body{ margin:0; padding:0; background:url("bg.png?t=1751272593601") repeat}

/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; overflow:hidden; width:100%; min-width:1220px; text-align:left; font-family:"微軟正黑體","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;}
.Area .list_00 li {list-style:none;float:left;overflow: hidden;}
	@media screen and (max-width:767px){
		.WRAPPER { margin-bottom: 0;min-width: inherit; min-height: 100vh; overflow: hidden; margin-bottom: 0;background:url("bg.png?t=1751272593601") repeat;background-size: cover; background-size: 100%}
		.WRAPPER img {  width:100%;  height:auto; }
	}

/** 入稿區基本 **/
.content_Area { position:relative; display:inline-block; margin:0px auto 0px auto; padding: 0px 0px 0px 0px; width:1220px;}
.buttonAera_more { position: absolute; top:15px; right:15px; padding-left:17px; padding-right:10px;  border-radius:60px; width:90px; height:40px; background-color: #666; text-align:center;}
.buttonAera_more a { display:block; padding-top:5px; font: bold 24px/29px Century Gothic; color:#fff; text-decoration: none; letter-spacing:-0.05em;}
.buttonAera_more:hover {background-color: #000;}
.buttonAera_more .btnGO { margin:5px; float:right; width:20px ;height:20px;}

/*PC背景*/
@media screen and ( min-width:768px) {
.Areabg01{ position:absolute;z-index:-2; top:0px; left:0; width:100%; min-width:1220px; height:750px;/*background-image:url(pc_01.jpg?t=1751272593601);*/ background-repeat:no-repeat; background-position:center top;}
/*.bgdeco { z-index:-5; position: absolute; top:1000px; left: 0; width: 100%; min-width:1220px; height: 100%; background: url(deco_repeat.png?t=1751272593601) repeat-y center top; pointer-events: none;}*/
.bgdeco {z-index: 0;position: absolute;top: 650px;left:0;width:100%;height: 100%;background-repeat:repeat-y;background-position:center top;transition:0.5s linear;pointer-events:none;/*mix-blend-mode: plus-lighter;*/}
.bgdeco2 {z-index: -1;position: absolute;top: 1050px;left:0;width:100%;height: 100%;background-repeat:repeat-y;background-position:center top;transition:0.5s linear;pointer-events:none;/*mix-blend-mode: plus-lighter;*/}
}

.Area01 .PD_layout  { pointer-events: unset!important }

/*版頭*/
/*.date { z-index:1; position:absolute; top: 79px; left: 555px; }
.date_txt { z-index:11; position:absolute; top: 0px; left: 0px; }
.date_bg { z-index:0; position:absolute; top: 0px; left: 0px; }*/
@media screen and (min-width:768px){
.Area_title {width:1220px; height: 620px; position:relative; margin:0 auto; box-sizing:border-box;  padding: 0 0 0 0;}
.Area_title .titlelogo {z-index:3;position:absolute;top: 295px;left: 702px;}		
.Area_title .title01 {z-index:3;position:absolute;top: 46px;left:299px; }
.Area_title .title02 {z-index:4;position:absolute;top: 143px;left: 644px;}
.Area_title .top_light { position: absolute; top: 46px;left:258px;mix-blend-mode: screen; z-index:4;}
.Area_title .sun { position: absolute; top: -150px;left:258px;mix-blend-mode: screen; z-index:1;}
.Area_title .date { position:absolute; top:162px; left:175px;}
.Area_title .date img{ width:80%;}	
.top_deco01 {position:absolute; top: 326px; left:1152px;}
.top_deco02 {position:absolute; top: 270px; left:-335px;}
.top_deco03 {position:absolute; top: 441px; left:-65px;}
}

@media screen and (max-width:767px){
.Area_title { width:100%; height: 100%; padding:0 ; margin:0;}
.Area_title .titlelogo {z-index:4;position:absolute;width:40%;top: 9vw;left: 30vw;}	
.Area_title .title01 {z-index: 4;position: absolute;width: 86.5%;top: 4.2vw;left: 6.5vw;}
.Area_title .top_light {z-index:4;position:absolute;width:85%;top: 12vw;left:9vw; mix-blend-mode: screen;}
.Area_title .sun { position: absolute; top:-27vw; left:9vw; mix-blend-mode: screen; z-index:1;}	
.Area_title .date {z-index: 10;position:absolute; width: 22%; top: 33vw; left:1.5vw; animation-delay:1.1s;}	
.date { z-index: 0; position:absolute; width: 18%;  top: 39.5vw; left: 75.5vw;   animation-delay:1.1s;}
	
.top_deco01 {position:absolute; top: 95.3vw; left:76.5vw; width: 27%}
.top_deco02 {position:absolute; top: 66vw; left:-3.3vw; width: 33%}
.top_deco03 {position:absolute; top: 105.5vw; left:6.2vw; width: 11.5%}


}
	

/*副標*/

.bankArea .box_2 { position: absolute;top:256px; left:256px; }
      @media screen and (max-width:767px){
        .bankArea { position: absolute; top: 0vw; left: 0vw; width: 100%;}
        .bankArea .box_1 { position: absolute; top: 0.3vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 80%;}
        .bankArea .box_1.go_bt:hover { -webkit-transform: translateX(-50%); transform: translateX(-50%);}
        .bankArea .box_2 { position: absolute; top: 37.5vw; left:21vw; -webkit-transform: translateX(-50%); transform: translateX(-50%); width:77%;}
        .bankArea .box_2 .bank_swiper { width:100%; height: 20vw;}
      }



/*版頭品*/
.toppd { position: absolute; top:0px;left:0px; }
.toppd .PD_layout ul {}
.toppd .PD_layout ul li {border: none; background-color: transparent; }
.toppd .box { position: absolute;top:170px;left:658px; }
.toppd .box .Area_swiper { width:480px; height:430px;}
.toppd .box .Area_swiper ul { margin: 0; padding: 0; text-align:center;background-color: transparent; }
.toppd .box .Area_swiper ul li { list-style: none outside none; border: none;}
.toppd .box .Area_swiper img {  width:100%; height:auto; padding-left:0;}
.toppd .box .Area_swiper .pagination { position:relative;}
      @media screen and (max-width:767px){
        .toppd { position: absolute; top: 32vw; left: 4.5vw; width: 100%;}
        .toppd .box { position: absolute; top: 22vw; left:-3.5vw; width:100%;}
        .toppd .box .Area_swiper { width:100%; height: 84vw;}
		.toppd .box .Area_swiper img {  width:60%; height:auto; padding-left:0;}
 
      }
/*活動倒數*/
.TimerNick { position: absolute; top:580px; left: 150px; display: inline-block; z-index:8; text-align: center;}
.TimerNick .FontStyle {display: inline-block;margin: 0 0 0 5px;padding: 0;border: 0;font: normal 35px/30px Arial;color: #6e39a4;letter-spacing:0;text-align: center;}
.TimerNick span {padding-left: 2px;font: normal 23px/30px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;font-weight: 800;letter-spacing: -0.05em;color: #6e39a4;}
@media screen and (max-width:767px){
  .TimerNick  {width: 100%;top:118.5vw;left:-1vw;}
  .TimerNick .FontStyle {margin: 0;padding: 0;border: 0;font: bold 5.2vw/5.2vw Arial;color: #6e39a4;}
  .TimerNick span {padding-left: 0vw;font: bold 4vw/4vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;color: #6e39a4;}
}

/** 倒數 **/
.TimerNick_2 {width: 60%;height: 50px;text-align: center;padding: 0;z-index:4;margin: 0 auto;border-radius: 5em;}
.TimerNick_2 .FontStyle {position: relative;display:inline-block;width: 38px;top: 0;font: normal 35px/42px Arial;color: #fffc26;letter-spacing: 0px;text-align:right;height: 40px;padding: 0 1% 0 0;}
.TimerNick_2 span {padding-left: 4px;font: 23px/38px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;font-weight: 600;color: #fffc26;}
.TimerNick_2 small{  position:relative; font: bold 16px/38px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: 0em;color: #2a0d05;}
@media screen and (max-width:767px){
		.TimerNick_2 {position: absolute;top: 21vw;left: 0;margin:0;width: 100%;height: 2vw;text-align: center;padding: 0;  }
		.TimerNick_2 .FontStyle { margin:0; width: 7vw; font: normal 6vw/6vw Arial; color: #fffc26;letter-spacing: 0px;text-align:right;height: 6vw;padding: 0 1% 0 0;}
        .TimerNick_2 div:nth-of-type(2),
		.TimerNick_2 div:nth-of-type(3),
		.TimerNick_2 div:nth-of-type(4){ width: 5vw;}
		.TimerNick_2 span {font: bold 4vw/11vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: 0em;   }
}


/*區塊01-行銷宮格區*/
@media screen and (min-width:768px){
.Area01 {top:0px;padding-top: 133px;}
.Area01 .PD_layout[ data-pd-li="BN" ] ul {padding: 0!important}
.Area01 .Area01_bg {position:absolute;z-index:-1;left:-520px;top:0px;width: 2000px; height:2145px;background-image: url("wave_bg.png?t=1751272593601");background-repeat: no-repeat; background-position: top center; }
.Area01 .more_btn {position: absolute;top: 207px;left:929px;z-index: 3;}
      }
@media screen and (max-width:767px){
	    .Area01 .PD_layout[ data-pd-li="BN" ] ul, .PD_layout[ data-pd-li="BN-AWD" ] ul, .PD_layout[ data-pd-li="PDBN" ] ul {padding: 0!important}
        .Area01 {top: -3vw; height: 78vw; z-index: 0}
        .Area01 .Area01_bg {position:absolute;z-index:-1;top:0; left:0;height:82vw;width: 100%; background-size: cover; background-image: url("wave_bg_m.png?t=1751272593601");background-repeat: no-repeat; background-position: top center; }
	    .Area01 .more_btn {z-index: 20;position: absolute;top: 13vw;left: 83vw;width: 13%;}     
        .Area01 .more_btn img { width: 100%; }  
      }

/*登記贈品文案顏色*/
.Area_danji .danji_box ul li .activityText .gifts span { color: #6e39a4;}     



	  
	  
	/*嚴選大牌 頁籤輪播區*/
  @media screen and (min-width:768px){
/*.Area_brand {padding-top: 50px}*/
	  	  }
.Area_brand .layout_page {/*width:885px; position: absolute; left:60px; */z-index:2;margin: 0 auto}
.Area_brand .layout_page .cate-hover { filter: hue-rotate(60deg) brightness(130%);}
.Area_brand .layout_page ul  { display:flex; flex-direction:row; justify-content:center}
.Area_brand .layout_page ul li { padding: 0; margin:0 20px 20px 0; }
.Area_brand .layout_page ul li img { width:100%;}
.Area_brand .layout_page .PD_slide { background-color:none!important; min-width:inherit;}
.Area_brand .box { position:relative; width:90%; height:375px;  top:15px;  left: 50px; overflow:hidden;}
 

@media screen and (max-width:767px){
  .Area_brand { height:88vw;top: -7vw;}
  .Area_brand .layout_page { position: absolute; height:18vw; width:100%; left: 2%; top:18vw; margin-bottom:0px; z-index:99;}
  .Area_brand .layout_page .cate-hover {filter: hue-rotate(60deg) brightness(130%);}
  .Area_brand .layout_page ul { display:flex; flex-direction: row ;}
  .Area_brand .layout_page ul li { padding: 0 2% 2% 0!important; margin:0!important; width:43%;  z-index:99;}
  .Area_brand .layout_page ul li img {width:100%;}
 .Area_brand .box { width:96%; height:100%;  top:15vw;  left:2vw; overflow:hidden;}
	  }
  
	  
	  
/*Area_PD1公版*/	  
  @media screen and (min-width:768px){
.Area_PD1 {position: absolute;top:391px;}  
}

  @media screen and (max-width:767px){
.Area_PD1 {position: absolute;top:57vw;}	  	 
}	  
	  
	  
	  
	  
	  

/*02-主打品*/
.Area03 .PD_layout ul {background-color: transparent; }
.Area03 .PD_layout ul li {border: none; }
  @media screen and (min-width:768px){
.Area03 { height: 2320px }
.Area03 .PD_layout {margin-top:30px;}	  
.Area03 .PD_layout  ul {margin-left:-30px; }
.Area03 .PD_layout  ul li:nth-child(even){ margin:180px 0 -75px }	  
.Area03 .PD_layout  ul li {width:100%; }	  
}

  @media screen and (max-width:767px){
.Area03 {height:470vw;}	
.Area03 .PD_layout { position: absolute; top: 11vw; left:0vw; }	  
.Area03 .PD_layout  ul { padding-left: 0em;padding-right: 0em; width: 100%!important}	  	  	  
.Area03 .PD_layout  ul li{ width:100%;}	  
/*.Area03 .PD_layout  ul li:nth-child(even){ margin:15vw 0 -5vw }	 */ 	  	 
}

/*05-商品區*/
/*.Area05_bg {background-color: #35c0ba; padding-bottom:40px}*/

@media screen and (min-width:768px){
/*	.Area_PD5 .box {padding-top: 120px;}*/
	.Area_PD5_bg {position:absolute;left:-390px;top:0px;width: 2000px; height:1124px; background:url(pd_bg.png?t=1751272593601) top center no-repeat; background-size:contain;z-index:-1}
}
@media screen and (max-width:767px){
	.Area_PD5 .box{background:url(pd_bg_m.png?t=1751272593601) top no-repeat; padding-top: 19vw}
}


/*BN區*/
.Area_BN .PD_layout .PD img {border-radius: 10px!important;}
@media screen and (max-width: 767px) {
    .PD_layout[ data-pd-li="BN" ] ul, .PD_layout[ data-pd-li="BN-AWD" ] ul, .PD_layout[ data-pd-li="PDBN" ] ul {
        grid-gap: .5em;
    }
}
@media screen and (min-width: 767px) {
.Area_BN {height:100%;z-index: 40;top: 80px}
.Area_BN .title img{ width: 100%;}
.Area_BN .box{width:100%;margin: 0 auto;padding-bottom:80px;}	

/*BN*/
.Area_BN .AreaBN{width:100%;margin: 0 auto;padding-bottom: 15px;}
.Area_BN .swiper-button-next, .swiper-button-prev {top: 42%;}	
/*輪播BN*/
.AreaBN2 {position: relative;width:100%;left:0px;padding-bottom: 30px;margin: 0 auto;}
.AreaBN2 .box_swiper { overflow: hidden;}
.AreaBN2 .box_swiper .PD_layout { position: relative; height:340px;}
.AreaBN2 .box_swiper .PD_layout ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: 0;}
.AreaBN2 .box_swiper .PD_layout ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; border: none;}
.AreaBN2 .box_swiper .PD_layout .PD_slide { min-width: inherit;}
 }

@media screen and (max-width: 767px) {
.Area_BN {height:100%;padding-bottom:8vw;top: 5vw}
/*BN*/ 
.Area_BN .AreaBN{width:100%;margin: 0 auto;padding-bottom:2vw;}
.Area_BN .box{width:100%;margin: 0 auto;padding-bottom:0;}	

/*輪播BN*/
.AreaBN2 {position: relative;width: 100%;left:3vw;}
/*  .AreaBN2 .box_swiper .PD_layout { width: 96%; margin: 0 auto; height: 30vw;}*/	
.AreaBN2 .box_swiper { overflow: hidden;}
.AreaBN2 .box_swiper .PD_layout { position: relative; height:36vw;}
.AreaBN2 .box_swiper .PD_layout ul.PD_wrapper { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; box-sizing: content-box; grid-gap: 0;}
.AreaBN2 .box_swiper .PD_layout ul.PD_wrapper li { flex-shrink: 0; margin: 0; padding: 0; border: none;}
.AreaBN2 .box_swiper .PD_layout .PD_slide { min-width: inherit;}
}

/*置底*/
.fixbn a {padding-bottom:constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		  padding-bottom:env(safe-area-inset-bottom);}   /* 兼容 iOS >= 11.2 */ 
.fixbn{position:fixed; background-size:100%;bottom:0; display:block; z-index: 99;}
.fixbn ul li{float:left;padding:0;list-style-type:none;width:50vw;}
.fixbn ul li img{width:100%;margin:0 auto;}
.fixbn ul{margin-top: 0px;margin-bottom: 0px;padding-left: 0px;}
/*1顆按鈕*/
.fixbn .class_00 {position:absolute;width:100%; height: 100%; }
.fixbn .class_00 a {display:block;width:100%;height:100%;}
.fixbn .class_01 { top:0%;left:0%;}


/*2顆按鈕*/
.fixbn .class_00 {position:absolute;width:50%; height: 100%; }
.fixbn .class_00 a {display:block;width:100%;height:100%;}
.fixbn .class_01 { top:0%;left:0%;}
.fixbn .class_02 { top:0%;left:50%;}

/*共用*/
.for_pc { display:block !important;}
.for_m  { display:none !important;}
	@media screen and (max-width:736px){ 
		/*共用*/
		.for_pc { display:none !important;}
		.for_m  { display:block !important;}
	}






/*logo*/
@media screen and (min-width:766px){
.go_bt2 {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.go_bt2:hover { 
   filter:brightness(130%);
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);
		  }
	.Area .go_bt {  display:block;
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover { 
  -webkit-transform:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}
	}



/*區塊_all*/
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Area { position: relative; margin:0 auto;  border-radius:0; text-align:center; }
.Areabottom {margin-bottom:70px; }
.Area a { position:relative; display:block;} 
.Area .go_bt {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;

       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover {
  -webkit-transform:scale(0.95);

     -moz-transform:scale(0.95);

      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}

	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		.Area .go_bt:hover {  
			-webkit-transform:none;
			-moz-transform:none;
			-ms-transform:none;
			-o-transform:none;
			transform:none;}
		.Areabottom {margin-bottom:5vw; }
	}
































/*Area_page*/
.Area_page h3 { color: #fff; margin: 0; padding: 0}
  @media screen and (min-width:768px){ 
    .Area_page { overflow: hidden; background-color: #8b4dca; 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 { top:7vw;width: 96%; overflow: hidden; background-color: #8b4dca; padding: 5vw 0 ; border-radius: 1em } 
    .Area_page h3 { color: #fff; margin: 0 auto 2vw; padding: 0}
  }







/*danji*/
  @media screen and (min-width:768px){ 

  }
  @media screen and (max-width:767px){
    .Area_danji .danji_box ul li img{ width: 96%;} 
  }

/*LOGO*/
  @media screen and (min-width:768px){ 

  }
  @media screen and (max-width:767px){
    .Area08 .box{ width: 96%;margin: 0 auto;} 
  }

/*標題*/
@media screen and (min-width: 768px){
.box_txt {position: relative;margin: 0 auto;width: 100%;height: auto;z-index: 20;}
.box_txt ul li {pointer-events: none;}
.box_txt ul li .PD_img img{width: 78%;}

}

@media screen and (max-width:767px){
.box_txt {position: relative;margin: 0 auto;width: 100%;padding: 0.5% 0;height: 11vw;}
.box_txt ul li {pointer-events: none;}
.box_txt img{width: 100%;}
}
	


/*標題*/
@media screen and (min-width: 768px){
.box_txt2 {position: relative;margin: 0 auto;width: 100%;height: auto;}
.box_txt2 ul li {pointer-events: none;}
.box_txt2 ul li .PD_img img{width: 78%;}

}

@media screen and (max-width:767px){
.box_txt2 {position: relative;margin: 0 auto;width: 100%;top:10vw;padding: 0.5% 0;height: 11vw;}
.box_txt2 ul li {pointer-events: none;}
.box_txt2 img{width: 100%;}
}
	  
/*折價券*/	  
	  
	  

@media screen and (max-width:767px){
.Area_coupon .PD_layout .PD img {width: 97%;}

}


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