@charset "utf-8";

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

/*隱鑶*/
.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 .Area_top{position: relative; }
.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:1220px;}
	@media screen and (max-width:767px){
		.WRAPPER { padding-bottom:0px; margin:0 auto; display: block; min-width:100%; background-image:url(mb_bg.jpg?t=1736416159877); background-repeat:repeat-y; background-size:100%; }
		.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;  }
	}


.WRAPPER .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;}
.WRAPPER .go_bt:hover { 
   filter:brightness(120%);
  -webkit-transform:translateY(10px);
     -moz-transform:translateY(10px);
      -ms-transform:translateY(10px);
       -o-transform:translateY(10px);
          transform:translateY(10px);}

/*滑過會亮*/	
.WRAPPER .go_bt3 {
  -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;}
.WRAPPER .go_bt3:hover { 
   filter:brightness(115%);
  /*-webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);*/
		  }


.deco01{z-index:1;	animation: sway 5s infinite ease-in-out alternate;
			   -moz-transform-origin: top;
			    -ms-transform-origin: top;
				 -o-transform-origin: top;
  			-webkit-transform: scale(0.3);
			   -moz-transform: scale(0.3);
			    -ms-transform: scale(0.3);
				 -o-transform: scale(0.3);
				 transform-origin: -100% 0; }

.deco02{z-index:1;	 animation: sway 4.5s infinite ease-in-out alternate;
			   -moz-transform-origin: top;
			    -ms-transform-origin: top;
				 -o-transform-origin: top;
  			-webkit-transform: scale(0.3);
			   -moz-transform: scale(0.3);
			    -ms-transform: scale(0.3);
				 -o-transform: scale(0.3);
				 transform-origin: 110% 0; }


/*PC背景*/
@media screen and (min-width:767px){
  .bg_deco { z-index:-2; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:100%; background-repeat:repeat-y; background-position:center top; }
	.bg_deco0 { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:100%; background-repeat:no-repeat; background-position:center top; }
	.bgtop01 { z-index:-1; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:1100px; background-repeat:no-repeat; background-position:center top; }
	.bgtop02 { z-index:-3; position:absolute; top:1100px; left:0; width:100%; min-width:1220px; height:100%; background-repeat:repeat-y; background-position:center top; }
}

/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; text-align:center;  }
.Area .box_bg{position:absolute;top:0;left: 0;z-index: 0;} 
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}

.Area_1bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
.Area_1bn_nopadding a  { float:left; margin:0; padding:0; width:100%; list-style: none;}
.Area_1bn_nopadding img  { float:left; margin:0; padding:0; width:100%; list-style: none;}
.Area_2bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
.Area_2bn_nopadding a { float:left; margin:0; padding:0; width:50%; list-style: none;}
.Area_3bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;width:96%;}
.Area_3bn_nopadding p { float:left; margin:0; padding:0; width:33.3%; list-style: none; text-align:center;}
.Area_4bn_nopadding { margin: 0 auto; padding:0;width:1220px; overflow:hidden;}
.Area_4bn_nopadding a { float:left; margin:0; padding:0; width:25%; list-style: none;}		/*區塊_兩邊間距*/

	@media screen and (max-width:767px){
	.Area .go_bt:hover { 
		-webkit-transform:none;
		 -moz-transform:none;
			-ms-transform:none;
			 -o-transform:none;
				transform:none;}
	.Area1220 { width:100%;}
	.Area960 { width:100%;}
	.Area img{ width:100%;}
	.Area { position: relative;}

	/*區塊_切割*/
	.Area_1bn { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_1bn a { float:left; margin:0 0 2% 0; padding:0; width:100%;}
	.Area_2bn { width:96%; margin: 0 2%; padding:0; overflow:hidden;}
	.Area_2bn a { float:left; margin:0 1% 2%; padding:0; width:48%; }
	.Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_3bn a { float:left; margin:0 1% 2% ; padding:0; width:31.3%; }
	.Area_1bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_1bn_nopadding a { position:relative; float:left; margin:0; padding:0; width:100%; }
	.Area_2bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_2bn_nopadding a { float:left; margin:0; padding:0; width:50%;}
	.Area_3bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_3bn_nopadding a { float:left; margin:0; padding:0; width:33.3%;}
	.Area_4bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_4bn_nopadding a { float:left; margin:0; padding:0; width:25%; }	
	}


/*版頭*/
.Area_top { position:relative; width:1220px;height:1000px; }
.Area_top .title{position:absolute; top:152px; left:282px ; width: 660px; z-index:2;}
.Area_top .time{position:absolute; top:7px; left:881px ; z-index:2;}
.Area_top .toppd{position:absolute; top:245px; left:281px ; width: 737px ;z-index:10; animation-delay: 0.5s;}
.Area_top .sub02{position:absolute; top:821px; left:355px ; width: 510px; z-index:10; animation-delay: 1.2s;}

.light01 {pointer-events:none;position:absolute;top:480px;left:50px;z-index:8;pointer-events: none;}
.light02 {pointer-events:none;position:absolute;top:500px;left:675px;z-index:8;pointer-events: none;}


	@media screen and (max-width:767px){
	 .Area_top { position:relative; width:100%; height:111vw; }
	 .Area_top .title{position:absolute;top:16.5vw;left:16vw; z-index:2; width: 69vw;}
	 .Area_top .time{position:absolute;top:1.5vw;left:80.5vw; z-index:3; width: 20%;}
	 .Area_top .toppd{position:absolute;top:25vw;left:7vw; z-index:3; width: 94%;}
	 .Area_top .sub02{position:absolute;top:96vw;left:16vw; z-index:2; width: 65%;}
}


/*副標輪播*/
.Area_sub {position: absolute; display:block;  margin:0 auto; padding:0;}
.Area_sub { width:238px; position:absolute; top:13px ;left:487px;text-align: center;z-index:8;}
.Area_sub  img{width:100%;}

@media screen and (max-width:767px){
.Area_sub {width:100%;position: absolute; display:block;  margin:0 auto; padding:0;}
.Area_sub { width:24%; position:absolute; top:1vw ; left:38vw; z-index:8;}
.Area_sub  img{width:100%;}

}







/* 作圖入稿區標 (pc:1220px,mb:960px) */
.Area01 .box_title_img,.Area02 .box_title_img{margin: 0 auto 10px; z-index: 5; width: 65%; padding-top: 10px;}
.Area01 .box_title_img li,.Area02 .box_title_img li{pointer-events: none;}
@media screen and (max-width:767px){

  .Area01 .box_title_img,.Area02 .box_title_img{width: 90%; margin-bottom: 2vw;}
}











@media screen and (min-width:768px){
	.Area01{ position: relative; top: 0; height: 565px; background-image: url(Area_bg_01.png?t=1736416159878);background-repeat: no-repeat;background-position: center top;}
}

@media screen and (max-width:767px){
	.Area01{ position: relative;  top: 0;; background-image: url(Area_bg_01_m.png?t=1736416159878); background-repeat: no-repeat; background-size: cover;}

}











@media screen and (min-width:768px){
.AreaBtn .AreaBtn01 ul{grid-gap:20px}
.AreaBtn .AreaBtn02{margin-left: -50px;}
}

@media screen and (max-width:767px){
.AreaBtn .AreaBtn01 ul{grid-gap:2vw}
.AreaBtn .AreaBtn02{margin-left: -6vw;}
}

@media screen and (min-width:768px){
	.Area02{ position: relative; top: 0; height: 324px; background-image: url(shopback_bg.png?t=1736416159878);background-repeat: no-repeat;background-position: center top;}
}

@media screen and (max-width:767px){
	.Area02{ position: relative;  top: 0;; background-image: url(shopback_bg_m.png?t=1736416159878); background-repeat: no-repeat; background-size: cover; height: 37vw;}

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

	.AreaDanji ul{width: 94vw;}
}


.Area05 .swiper-pagination-bullet{background: #fff;}
@media screen and (max-width:767px){
	.Area05 .Area_swiperPD .box { width: 100%;}
}

.Area06 .swiper-pagination-bullet{background: #fff;}
@media screen and (max-width:767px){
	.Area06 .Area_swiperPD .box { width: 100%;}
}


.Area_BN .swiper-pagination-bullet{background: #fff;}


.Area_BN .PD_layout ul{height: 230px;}
@media screen and (max-width:767px){
	.Area_BN .PD_layout ul{height: 30vw;}
}

.AreaBtn03 .PD_layout ul{grid-gap: 40px;}
@media screen and (max-width:767px){
	.AreaBtn03 .PD_layout ul{grid-gap: 5vw;}
	.AreaBtn03 .PD_layout ul li:nth-child(n+4){left: 17vw;}

}


@media screen and (min-width:767px){
 .mbottom1 { margin-top:50px !important}
 .mbottom2 { margin-top:80px !important}
 .mbottom3 { margin-top:110px !important}
 .mbottom4 { margin-top:150px !important}
 }



/*Appletxt*/
.apple_txt{ position: relative;margin:30px auto; color:#fff;font-size: 13px; text-align: center; }
	@media screen and (max-width:767px){
	.apple_txt{position: relative;margin:2%; color:#fff; }
	}






/* 作圖入稿區標 (pc:1220px,mb:960px) */
.box_title_img{margin: 0 auto; z-index: 5; width: 100%; padding-top: 10px;margin-left: -30px;}
.box_title_img li{pointer-events: none;}
@media screen and (max-width:767px){
  .box_title_img{width: 140vw;margin-left: -24vw;}
  
}


/*輪播物件*/
.Area_swiperPD .box{ position: relative; overflow: hidden;  margin: 0 auto;}
.Area_swiperPD .box ul.PD_wrapper { position: relative; display: flex; flex-wrap: nowrap; margin: 0; width: 100%; box-sizing: content-box; background-color: rgba(0,0,0,0); }
.Area_swiperPD .box ul.PD_wrapper li{ flex-shrink: 0; margin: 0; padding: 0; min-width: auto; background-color: #fff; border-top: none; border-right:none; border-radius: 10px;}
.Area_swiperPD .PD_layout .PD p .Price { font-size: 25px; }

@media screen and (min-width: 768px) {
.Area_swiperPD .box { width: 1190px;}
.Area_swiperPD .box ul.PD_wrapper { padding: 0 0 50px;}
.Area_swiperPD .box ul.PD_wrapper li{ width: 304px; margin: 0; padding: 0;}
}
@media screen and (max-width: 767px) {
.Area_swiperPD .box { width: 95%;}
.Area_swiperPD .box ul.PD_wrapper { padding: 0 0 10vw;}
.Area_swiperPD .box ul.PD_wrapper li{ width: 48vw; margin: 0; padding: 0;}
.Area_swiperPD .PD_layout .PD .Price{ font-size:24px; }
.Area_swiperPD .PD_layout .PD p b, .Area_swiperPD .PD_layout .PD p del, .Area_swiperPD .PD_layout .PD p .money{ font-size:14px; }
}



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




.p-e-n{pointer-events: none;}




@media screen and (max-width:767px) {
	.w94 .PD_layout ul.PD_wrapper{width: 94vw!important; margin: 0 auto;}
}


    
/* 推推樂 */
.mb-l{margin-bottom: 60px;}
.mb-m{margin-bottom: 30px;}
.mb-s{margin-bottom: 10px;}

@media screen and (max-width:767px) {
.mb-l{margin-bottom: 8vw;}
.mb-m{margin-bottom: 5vw;}
.mb-s{margin-bottom: 2vw;}
}

.pb-l{padding-bottom: 60px;}
.pb-m{padding-bottom: 30px;}
.pb-s{padding-bottom: 10px;}

@media screen and (max-width:767px) {
.pb-l{padding-bottom: 8vw;}
.pb-m{padding-bottom: 5vw;}
.pb-s{padding-bottom: 2vw;}
}



/* 20240527改版後移除公版設定*/

/*移除公版設定，區標、BN作圖區移除公版樣式，PD_layout 區塊加上remove_box_style標籤
*/
.Area .remove_box_style ul { background-color: transparent; grid-gap: 10px;}
.Area .remove_box_style ul li { border: none!important;}
@media screen and (max-width:767px){
  .Area .remove_box_style ul { width: 100%; grid-gap: 0.2em;}
  .Area .remove_box_style ul {}
} */

/* 輪播移除公版設定，輪播公版移除公版樣式設定，PD_layout 區塊加上swiper_remove_box_style標籤*/
.Area .swiper_remove_box_style ul { background-color: transparent; grid-gap: 0;}
.Area .swiper_remove_box_style ul li { border: none!important; background-color: #fff;}
.Area .swiper_remove_box_style ul li,
.Area .swiper_remove_box_style ul li .PD_img img { border-radius: 10px;}
@media screen and (max-width:767px){
  .Area .swiper_remove_box_style ul { width: 100%; grid-gap: 0.2em;}
  .Area .swiper_remove_box_style ul {}
}

/*3品公版間距*/
.Area .PD_layout-add2cart ul { padding: 20px;}
@media screen and (max-width:767px){
  .Area .PD_layout-add2cart ul { padding: 0.2em 0;}
  .Area .PD_layout-add2cart ul li { padding: 0.2em;}
}